1、選定區域
<!--開始-->
<!--startprint-->
。。。內容。。。
<!--endprint-->
<!--結束-->
打印按鈕<button onclick="doPrint1()">打印</button>
function doPrint1() {
var bodyhtml=window.document.body.innerHTML; //獲取頁面html
var startprint="<!--startprint-->";
var endprint="<!--endprint-->";
var printhtml=bodyhtml.substr(bodyhtml.indexOf(startprint)+17);
printhtml=printhtml.substring(0,printhtml.indexOf(endprint)); //截取要打印的html
var iframe = document.createElement('IFRAME');//創建iframe
iframe.setAttribute('style', 'display:none;');//隱藏iframe（無感打印區域）
var doc = null;
document.body.appendChild(iframe);
doc = iframe.contentWindow.document;
//引入css文件，同時插入我們截取的需要打印的html
doc.write('<html><head><link rel="stylesheet" href="/css/dayin.css?ts=20200507" media="all"></head><body class="">'+printhtml+'</body></html>');
doc.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();//打印
document.body.removeChild(iframe);//刪除iframe
}
注： 解決iframe中內容css丟失的解決方案是將打印區域所需要的css放入一個css文件中，在iframe中引用文件即可