利用JS技術實現打印HTML表格
通常在瀏覽網頁的時候，網頁上總是出現一些和內容無關的內容，在打印的時候，要是把整個網頁都打印下來，總會有些不方便。。。所以在有需要打印的網頁上稍微設置一下打印頁是很有必要的
js代碼：
function preview(oper){ if (oper < 10){ bdhtml=window.document.body.innerHTML;//獲取當前頁的html代碼 sprnstr="<!--startprint"+oper+"-->";//設置打印開始區域 eprnstr="<!--endprint"+oper+"-->";//設置打印結束區域 prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //從開始代碼向后取html prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//從結束代碼向前取html window.document.body.innerHTML=prnhtml; window.print(); window.document.body.innerHTML=bdhtml; } else { window.print(); } }
然后在所需要打印的代碼，用<!--startprint1-->和<!--endprint1-->包圍着，如下：
<!--startprint1--> <img src="img/Stone.png" alt="" /> fffffffffffffffffffffffffffffffffff <!--endprint1-->
最后加上一個打印的按鈕
<input type="button" name="button_export" title="打印1" onclick="preview(1)" value="打印1"/>
另外說明一下，在一個HTML頁面里面，可以設置多個打印區域，需要改動一下的就只是幾個數字就OK了。如：
在選擇第二個區域里面時用<!--startprint2--><!--endprint2-->包圍着，而按鈕自然也改成對應的preview(2)了。這樣第二區域的打印就完成。
還有一點，就是CSS樣式表的問題了，打印的效果是不包含背景的打印的，設置是注意一下。<style media="print">、<link media="print">的用法合理應用，media="print"是不被網頁所顯示的，只能在打印的效果上存在，可以設置出打印效果和在網頁上所顯示的不一樣。
style中寫打印樣式有兩種方式: 方法一： <style media="print"> .part2{ color: blue; } </style> 方法二： <style> @media print{ .part2{ color: black; } } </style>
最終效果：
整體代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--寫法一--> <style media="print"> .part1{ color: red; } .part2{ color: blue; } </style> <!--寫法二--> <!--<style> @media print{ .part2{ color: black; } } </style>--> </head> <body> <!--startprint1--> print1print1print1print1print1print1 <div class="part1"></div> <img src="img/Stone.png" alt="" /> <!--endprint1--> <input type="button" name="button_export" title="打印1" onclick="preview(1)" value="打印1"/> <br /> <!--startprint2--> print2print2print2print2print2print2 <div class="part2"></div> <img src="img/Doom Bringer.jpg" alt="" /> <!--endprint2--> <input type="button" name="button_export" title="打印2" onclick="preview(2)" value="打印2"/> <script> function preview(oper){ if (oper < 10){ bdhtml=window.document.body.innerHTML;//獲取當前頁的html代碼 sprnstr="<!--startprint"+oper+"-->";//設置打印開始區域 eprnstr="<!--endprint"+oper+"-->";//設置打印結束區域 prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //從開始代碼向后取html prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//從結束代碼向前取html window.document.body.innerHTML=prnhtml; window.print(); window.document.body.innerHTML=bdhtml; } else { window.print(); } } </script> </body> </html>
通過定義css讓頁面可以打印指定的底色
tr:nth-child(odd) {
background-color: red;
-webkit-print-color-adjust: exact;
}
參考文章： https://blog.csdn.net/memgxingfeixiang/article/details/52702820