IT开发知识库 - 立志做成最实用的开发手册!
Web开发 Web前端 HTML/CSS PHP ASP JavaScript vbScript Ajax 网页设计 跨浏览器开发 高性能WEB开发 Web Service XML/SOAP CGI
当前位置: 开发知识库 > WEB开发 > Web前端 > jquery print 一部分区域打印

jquery print 一部分区域打印

时间:2014-09-26来源: 作者:点击:
jquery print 部分区域打印   声明: 本文是我看完 jQuery 插件 jquery.PrintArea.js 后,  基本上默写出来的,  内容大致相同,  只是多加了写注释   !DOCTYPE html h
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 onclick="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()
}

 

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
相关内容
推荐内容