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