jquery利用printArea实现局部打印和全局打印

jquery如何利用printArea插件实现局部打印和全局打印，下面web建站小编给大家详细介绍一下实现方法！

html代码

<div id="printArea">
  <h2>第一部分内容</h2>
  <p>我的打印区域2</p>
</div>
<button onclick="print1()">局部打印</button>
<button onclick="print2()">局部打印</button>

printArea.js插件

(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);

调用方法：

$("#print1").click(function(){  
    $("#printArea").printArea(); 
  }); 
 
  $("#print2").click(function(){  
    $("body").printArea(); 
  }); 

简单介绍关于jquery的所有遍历方法

jquery如何实现鼠标点击页面出现水波纹效果

jquery关于交互的几种方式

jquery触发事件focus的运用

jquery判断标签中是否包含某属性

标签： jquery, printArea, 局部打印, 打印

上面是“jquery利用printArea实现局部打印和全局打印”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2568.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！