列印網頁指定區域的方法

最近有一個專案,只想要列印原本複雜網頁中的某個表格,看了很多方法,例如:

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 可以將其顯示就不影響原本的畫面了。

發佈留言