zoukankan      html  css  js  c++  java
  • jQuery打印插件PrintArea实现

    实现javascript打印功能,打印整个页面就很简单,但如果指定打印某一个区域就有点难点,这里有一个jQuery插件PrintArea可实现打印页面某区域功能。

    使用说明
    需要使用jQuery库文件PrintArea库文件

    使用方法
    一,包含文件部分

    1. <script type="text/javascript" src="jquery.js"></script>
    2. <script type="text/javascript" src="jquery.PrintArea.js"></script>

    二,html部分

    1. <div id="biuuu_button">打印</div>
    2. <div id="myPrintArea">
    3. .....文本打印部分.....
    4. </div>

    三,javascript部分

    1. $("div#biuuu_button").click(function(){
    2. $("div#myPrintArea").printArea();
    3. });

    jQuery插件PrintArea完整方法如下:

    (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;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);
  • 相关阅读:
    echarts之tooltip
    js随笔
    在wex5平台grid显示问题
    JSON.parse()和JSON.stringify()区别
    在wex5平台grid里面的gridselect下拉不能显示汉字问题
    wex5平台放入tabs组件后运行时显示空白
    正整数求n不用sqrt
    leetcode1143最长公共子序列
    美团Java一面(2020.3.19)
    leetcode138. 复制带随机指针的链表
  • 原文地址:https://www.cnblogs.com/ranran/p/3670777.html
Copyright © 2011-2022 走看看