原生js打印指定节点元素
生活随笔
收集整理的這篇文章主要介紹了
原生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>總結
以上是生活随笔為你收集整理的原生js打印指定节点元素的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue使用Vuex一步步封装并使用sto
- 下一篇： 公共服务领域英文译写规范_公共领域日：对