局部打印插件 jquery.PrintArea.js

以你之姓@ 2022-08-10 17:56 146阅读 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 条评论，146人围观）

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

相关阅读

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

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

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

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

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

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

相关 js局部打印

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

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

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

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

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

相关 JS 局部打印

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

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

相关 jQuery.print网页内容打印jQuery插件

简要教程 jQuery.print是一款简单易容且功能强大的网页内容打印[jQuery插件][jQuery]。该网页打印插件可以打印指定区域的网页元素，可以指定跳过不打印

喜欢ヅ旅行/ 2022年05月28日 03:28/ 0 赞/ 215 阅读

相关 Html局部打印

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

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

相关关于PDF局部打印

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

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

相关 mybatis打印真实SQL的插件

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

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

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

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

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