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

JavaScript
page-break
強制換頁方式

透過 CSSPagebreak 來調整 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");
});


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

window.print();


設置列印按鈕,Firefox 及 Google Chrome Canary 無法列印。

document.execCommand("print");