局部打印插件 jquery.PrintArea.js

以你之姓@ 2022-08-10 17:56 261阅读 0赞

(function ($) {
        var printAreaCount = 0;
        $.fn.printArea = function () {
            var ele = $(this);
            var idPrefix = "printArea_";
            removePrintArea(idPrefix + printAreaCount);
            printAreaCount++;
            var iframeId = idPrefix + printAreaCount;
            var iframeStyle = 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;';
            iframe = document.createElement('IFRAME');
            $(iframe).attr({
                style: iframeStyle,
                id: iframeId
            });
            document.body.appendChild(iframe);
            var doc = iframe.contentWindow.document;
            $(document).find("link").filter(function () {
                return $(this).attr("rel").toLowerCase() == "stylesheet";
            }).each(
                    function () {
                        doc.write('<link type="text/css" rel="stylesheet" href="'
                                + $(this).attr("href") + '" >');
                    });
            doc.write('<div class="' + $(ele).attr("class") + '">' + $(ele).html()
                    + '</div>');
            doc.close();
            var frameWindow = iframe.contentWindow;
            frameWindow.close();
            frameWindow.focus();
            frameWindow.print();
        }
        var removePrintArea = function (id) {
            $("iframe#" + id).remove();
        };
    })(jQuery);

使用示例：

<input type="button" id="btnPrint" value="打印"/>
    <div id="printContent">要打印的内容区域<div>
    
    <script type="text/javascript">
    $(function(){
            $("btnPrint").click(function(){ $("printContent").printArea(); });
    });
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，261人围观）

还没有评论，来说两句吧...

相关阅读

相关 eclipse插件（RCP）中日志打印

做软件开发要培养一个很值钱的习惯：打日志。打日志可以记录程序正确运行的结果，也可以记录错误运行的结果，更可以根据需要，有选择性的记录程序运行的细节问题，或关键性信息。这些信息并

缺乏、安全感/ 2023年10月05日 21:45/ 0 赞/ 135 阅读

相关 mybatis 打印完整sql插件

昨天跟朋友吃饭,朋友不知怎么说到mybatis的sql打印,我说,我记得可以直接打印sql出来的,还需要插件吗?他说打印的是有? 代替符号的,这样参数如果多了就不好操作,

梦里梦外;/ 2023年03月02日 07:39/ 0 赞/ 41 阅读

相关调用浏览器打印功能_局部打印案例

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont

Bertha 。/ 2022年10月31日 04:28/ 0 赞/ 290 阅读

相关 js局部打印

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t

我会带着你远行/ 2022年09月03日 00:17/ 0 赞/ 233 阅读

相关局部打印插件 jquery.PrintArea.js

(function ($) { var printAreaCount = 0; $.fn.printArea = function ()

以你之姓@/ 2022年08月10日 17:56/ 0 赞/ 262 阅读

相关 JS 局部打印

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c

朴灿烈づ我的快乐病毒、/ 2022年08月08日 09:15/ 0 赞/ 256 阅读

相关 Html局部打印

一、直接利用JS技术实现打印HTML表格通常在浏览网页的时候，网页上总是出现一些和内容无关的内容，在打印的时候，要是把整个网页都打印下来，总会有些不方便。。。所以在有需要打

傷城~/ 2022年05月19日 14:42/ 0 赞/ 249 阅读

相关关于PDF局部打印

PDF局部打印应用场景很多的电子原理图都是一整张很大的pdf的样子，但是我们经常会查看一部分电路的时候，经常会选择打印用到的一部分电路来直观的查看，但是往往pd

红太狼/ 2022年03月09日 15:53/ 0 赞/ 539 阅读

相关 mybatis打印真实SQL的插件

package com.zhanjixun.mybatis.interceptor; import lombok.extern.slf4j.Slf4j

桃扇骨/ 2022年03月09日 09:39/ 0 赞/ 397 阅读

相关 Jquery 打印插件——jQuery.print.js使用

需求在进行网页开发中不可避免会使用到打印功能，下面就来学习一下一款简单易用的插件吧！下载地址 [GitHub官网][GitHub] [个人分享][Link

待我称王封你为后i/ 2021年09月14日 09:34/ 0 赞/ 860 阅读