列印 Html 網頁時的強制換頁方式

在網頁中列印使用 CSS 定義列印的樣式,以適應列印的需求,例如調整頁面大小、顯示或隱藏特定的元素、更改字型大小和顏色等、屬性通常包括頁面大小、邊界、字型大小、顏色等,以確保列印的內容符合要求。通過設置 CSS 來控制列印版面的內容和外觀,可以更好的適應列印的需求。

JavaScript
page-break
強制換頁方式

透過 CSSPagebreak 來調整 Html 列印時的強制換頁(強迫元素前後換頁方式)。可以控制在列印產生 HTML 時頁面的內容分割和印表機分頁,在設計報表、表格的情況常會需要列印出來。

於文件標籤加入 CSS 語法 :

<p style="page-break-after:always"></p>

page-break-before: auto;
page-break-before: always;
page-break-before: avoid;
page-break-before: left;
page-break-before: right;

auto 初始值。如果必要則自動分頁(不強制分頁也不禁止分頁)。

always 始終在元素之前強制分頁。

avoid 避免在元素之前分頁。

left 在元素之前強制分頁,直到下一張空白頁的為左頁。

right 在元素之前強制分頁,直到下一張空白頁的右頁為止。


page-break-before: always /*在標籤前換頁*/
page-break-after: always /*在標籤後換頁*/


Print Events 監聽列印事件

當起動列印或「預覽列印」時,將觸發 beforeprint 事件。您可嘗試使用 F12 開發工具檢視結果。兩個都有觸發事件。

window.addEventListener("beforeprint", function () {
  console.log("Before print");
});

開始列印或「預覽列印」已關閉之後,觸發 afterprint 事件。

window.addEventListener("afterprint", function () {
  console.log("After print");
});

當開始列印前 window.onbeforeprint 事件會觸發。可以在這個事件中寫入列印前檢查頁面內容,或者調整列印樣式。當列印完成後 window.onafterprint 事件會觸發。可以在這個事件中寫入些列印完成操作,例如關閉列印窗口,或者重新設置頁面內容。



@media print

<link rel="stylesheet" href="print.css" media="print">

開啟列印視窗來列印當前的文件。在製作 RWD 響應式網頁設計時,用 Screen 辨別裝置大小,亦可設置 @media print 讓瀏覽可以辨別列印狀態。但覺得編輯一份 PDF 的下載方式比較完整些也不用考量那麼多,影響修改時的困擾。

window.print();


設置列印按鈕,Firefox 及 Google Chrome Canary 無法列印。可用於網頁文字編輯、文本框等元素中的文字編輯操作,不同瀏覽器中支持的編輯命令和參數可能有所不同,因此在使用時需要考量相應瀏覽器的兼容性處理。

document.execCommand("print");