jquery print 部分区域打印

声明： 本文是我看完 jQuery 插件 jquery.PrintArea.js 后，基本上默写出来的，内容大致相同，只是多加了写注释

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <div id="div" class="haha">test</div>
  <button οnclick="doPrint()">print</button>
</body>
</html>

(function($) {
  // 多次调用打印时标识不同ID
  var printCount = 0;
  // 区域打印
  $.fn.printArea = function() {
    // 打印区域的目标元素
    var tarEle = $(this);
    var idPrefix = "printArea_";
    // remove前一个打印区域iframe
    removePrintArea(idPrefix + printCount);
    printCount++;
    var iStyle = "position:absolute;width:0px;height:0px;left:-10px;top:0px;";
    var iId = idPrefix + printCount;
    // 创建一个新 iframe ，并追加到body体最后面
    var iframe = document.createElement("IFRAME");
    $(iframe).attr({
      style: iStyle,
      id: iId
    });
    document.body.appendChild(iframe);
    // 打印区域 iframe 的文档对象
    var iDoc = iframe.contentWindow.document;
    // 遍历当前文档中所有的 link 标签， 将这些 css 样式表写入到打印区域 iframe 文档中
    $(document).find("link")
    .filter(function() {
      return $(this).attr("rel").toLowerCase() == "stylesheet";
    })
    .each(function() {
      iDoc.write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' />");
    });
    // 将打印区域目标元素内容和class属性加入到一个新 div 中， 并写入到打印区域 iframe 文档对象中
    iDoc.write("<div class='" + $(tarEle).attr("class") + "'>" + $(tarEle).html() + "</div>");
    iDoc.close();
    
    // 用打印区域 iframe 子窗口对象调用print()执行打印
    var iframeWindow = iframe.contentWindow;
    iframeWindow.close();
    iframeWindow.focus();
    iframeWindow.print();
  };
  var removePrintArea = function(id) {
    $("iframe#" + id).remove();
  };
})(jQuery);

function doPrint() {
  $("#div").printArea()
}

jquery print 部分区域打印

猜你喜欢