最近有一個專案，只想要列印原本複雜網頁中的某個表格，看了很多方法，例如:
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 可以將其顯示就不影響原本的畫面了。
