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);
  • 相关阅读:
    内部类
    三大修饰符:static、final、abstract
    面向对象三大特性
    类和方法
    Vue-创建工程+element UI
    xshell连接虚拟机较慢问题 -----已解决
    Hbase配置
    Hive的安装配置
    Hive内容+配置
    Redis全局命令
  • 原文地址:https://www.cnblogs.com/ranran/p/3670777.html
Copyright © 2011-2022 走看看