原生js打印指定節點元素

很簡單（可粘貼至txt文檔后改后綴為html打開看效果）：

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>打印</title><meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body><div><span style="color:red">這里不打印 ！！！</span>
</div><div id="printDiv"><span style="color:green">打印這里！！</span>
</div>
<button onclick="print()">打印</button><script>function print(){// 設置要打印內容的 id: printDivconst WindowPrt = window.open('', '打印', 'width=' + (screen.availWidth - 10) + ',height=' + (screen.availHeight - 50) + ',left=0,top=0,location=0,menubar=0,toolbar=0,scrollbars=0,status=0'); // 裸全屏WindowPrt.document.head.innerHTML = window.document.head.innerHTML // 加入當前所有頭 - 以防樣式丟失WindowPrt.document.body.innerHTML = document.getElementById('printDiv').innerHTML; // 載入指定bodyWindowPrt.print() // 調用打印WindowPrt.close() // 自動等待print結束后執行}
</script></body>
</html>

將此方法放在主頁，傳入參數，實現公用（用原生onclick()事件調用）：

<script>// 打印var rootPrint = function (elId) {// 設置要打印內容的 id: elIdconst WindowPrt = window.open('', '打印', 'width=' + (screen.availWidth - 10) + ',height=' + (screen.availHeight - 50) + ',left=0,top=0,location=0,menubar=0,toolbar=0,scrollbars=0,status=0'); // 裸全屏WindowPrt.document.head.innerHTML = window.document.head.innerHTML // 加入當前所有頭 - 以防樣式丟失WindowPrt.document.body.innerHTML = document.getElementById(elId).innerHTML; // 載入指定bodyWindowPrt.print() // 調用打印WindowPrt.close() // 自動等待print結束后執行}</script>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/278541.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/278541.shtml
英文地址，請注明出處：http://en.pswp.cn/news/278541.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！