JS 實現區域性列印和預覽
阿新 • • 發佈：2018-12-30
我們呼叫瀏覽器的列印功能需要window.print();方法，但是會將全部頁面打印出來，如果我們只需要列印部分頁面，這樣最簡單的辦法就是擷取html，保留我們想列印的部分。
<!DOCTYPE html> <html> <head> <title>列印</title> </head> <body> <div class="rightBox"> <div class="title">訂單詳情<a href="javascript:void(0);" class="btn btn-print">列印</a></div> "<!--startprint--> <div>需要列印的內容</div> <!--endprint--> </div> <script type="text/javascript"> $(function(){ /*提交稽核 */ $(".btn-print").on("click",function(){ preview(); }); function preview() { var bdhtml=window.document.body.innerHTML;//獲取當前頁的html程式碼 var startStr="<!--startprint-->";//設定列印開始區域 var endStr="<!--endprint-->";//設定列印結束區域 var printHtml=bdhtml.substring(bdhtml.indexOf(startStr)+startStr.length,bdhtml.indexOf(endStr));//從標記裡獲取需要列印的頁面 window.document.body.innerHTML=printHtml;//需要列印的頁面 window.print(); window.document.body.innerHTML=bdhtml;//還原介面 location.reload(); } }); </script>
我們只需要將我們列印的內容通過特殊的標籤（html可以識別的，自定義）包裹起來就可以，擷取其中的內容就是我們需要列印的部分，然後呼叫window.print();列印