1、借助插件打印(ps:该插件也是通过iframe进行打印)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>print page demo 3</title> <script type="text/javascript" src="../jquery/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="jquery.PrintArea.js"></script> </head> <body> <script> $(document).ready(function() { $("input#biuuu_button").click(function() { $("div#myPrintArea").printArea(); }); }); </script> <input id="biuuu_button" type="button" value="打印"></input> 确定是打印局部??? <div id="myPrintArea">.....文本打印部分.....</div> </body> </html>
2、window.open打开新页面进行打印
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>print page demo</title> <script type="text/javascript" src="../jquery/jquery-1.11.2.min.js" ></script> <script type="text/javascript"> function printPage() { var newWindow = window.open("", "_blank"); //打印窗口要换成页面的url //绘制html newWindow.document.write($("#printArea").html()); //打印后关闭窗口 newWindow.document.close(); newWindow.print(); newWindow.close(); } </script> </head> <body> <div><button type="button" onclick="printPage()">打印</button></div> <div id="printArea"> <div class="print_title">标题</div> <div class="print_content">打印的内容</div> </div> </body> </html>
3、iframe进行打印
function do_print(id_str) //id-str 打印区域的id { var el = document.getElementById(id_str); var iframe = document.createElement('IFRAME'); var doc = null; iframe.setAttribute('style', 'position:absolute;0px;height:0px;left:-500px;top:-500px;'); document.body.appendChild(iframe); doc = iframe.contentWindow.document; // 引入打印的专有CSS样式,www.111Cn.net根据实际修改 doc.write("<LINK rel=" stylesheet " type=" text / css " href=" css / print.css ">"); doc.write('<div>' + el.innerHTML + '</div>'); doc.close(); iframe.contentWindow.focus(); iframe.contentWindow.print(); if(navigator.userAgent.indexOf("MSIE") > 0) { document.body.removeChild(iframe); } } // var iframe = document.getElementById('printPage'); // 异步加载,导致内容还没获取就打印了 // iframe.onload = function() { // iframe.contentWindow.focus(); // iframe.contentWindow.print(); // }