列印 Html 网页时的强制换页方式

在网页中列印使用 CSS 定义列印的样式，以适应列印的需求，例如调整页面大小、显示或隐藏特定的元素、更改字型大小和颜色等、属性通常包括页面大小、边界、字型大小、颜色等，以确保列印的内容符合要求。通过设置 CSS 来控制列印版面的内容和外观，可以更好的适应列印的需求。

透过 CSS 的 Pagebreak 来调整 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");