最近有一個專案,只想要列印原本複雜網頁中的某個表格,看了很多方法,例如:
printjs 的方法,如果 table 中有 thead 似乎無法每頁都顯示。
也有用 css 將所有元素隱藏,並把要列印的區域設定成絕對定位並顯示,好像也無法解決高度問題。
但還是讓我想到一個妙招了,如果我把要列印的區域移至 body 的第一個元素,而且隱藏其後所有的元素,那不就解了嗎 ? 以下是一個範例
CSS 部分,我用 sass 寫 :
@media print { // 這段很妙喔,把所有該元素之後的隱藏,這樣就只能列印這個區域了 #print-data-table ~ * { display: none !important; } table { border-collapse: collapse; th { font-weight: bold; background-color: yellow; text-align: center; } th,td { padding: 4px; border: 1px solid black; } } }
HTML CODE 如下
<body> <h1>這標題其實我不想印</h1> <div class="data-print-wrapper"> <div id="print-data-table"> <table> <thead><tr><th>標題</th></tr></thead> <tbody> <tr><td>TEST</td></tr> <tr><td>TEST</td></tr> ... 一堆資料 ..... </tbody> </table> </div> </div> </body>
JS 如下,最主要把要列印的區域先移動到 body 的第一個元素,列印完成後將原資料再移動回來
let movementElement = document.getElementById("print-data-table"); document.body.prepend(movementElement); window.print(); document.getElementsByClassName("data-print-wrapper")[0].append(movementElement);
大功告成,測試可用,當然這個範例可能會讓列印時元素搬移照成網頁怪異,要列印完畢後才正常,但還是有解決方法的,就是複製要列印的 DOM Element 到 BODY 第一個元素並且隱藏,而真正列印時,css 可以將其顯示就不影響原本的畫面了。