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

透過 CSS 的 Pagebreak 來調整 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");