迹忆客 专注技术分享

本文将介绍几种在打印 HTML 内容时强制分页的方法。

将 page-break-after 属性设置为 always Inside @media print to Page Break in HTML

CSS 的@media 打印规则让我们在打印 HTML 内容时应用规则。 我们可以使用此规则更改样式。

我们可以使用 JavaScript 创建一个 onclick() 事件来打印指定的 HTML 内容。 window.print() 方法打印当前窗口。

我们可以使用 onclick() 事件来调用此方法。

在 CSS 中，使用@media print，我们可以将 page-break-after 属性设置为 always，以便 HTML 元素从该点开始分页。

例如，使用 h1 标签创建两个标题。 将第一个标题命名为分页前，将另一个标题命名为分页后。

给第一个标题一个 break-page 的类名。 然后创建一个按钮 Print 并为该按钮添加一个 onclick 侦听器并调用 window.print() 方法。

在 CSS 部分的@media 打印规则中选择分页类。 接下来，将其 page-break-after 属性设置为 always。

下面的例子显示，当我们点击打印按钮后，第一页出现分页前的标题，而打印时第二页出现第二个标题和按钮。 我们可以在打印 HTML 时使用 page-break-after 属性来分页。

示例代码：

<h1 class="break-page">Before page break </h1>
<h1>After page break</h1>
<button onclick="window.print()">Print</button>
@media print {
    .break-page {
        page-break-after: always;
    }
}

将 page-break-before 属性设置为 always Inside @media print to Page Break in HTML

这种方法与前一种方法非常相似。 不同之处在于我们使用的是 page-break-before 属性。

它在 @media 打印规则中的使用类似。 此方法在 HTML 内容之前进行分页，我们在此处使用了 page-break-before 属性。

例如，像第一种方法一样创建两个标题。 这一次，给第二个标题类名 break-page。

接下来，创建一个带有调用 window.print() 方法的 onclick 侦听器的按钮。 在 CSS 部分的 @media print 内，选择 break-page 类并将其 page-break-before 属性设置为 always。

分页符将出现在第二个标题之前，单击“打印”按钮时出现在分页符之后。

示例代码：

<h1>Before page break </h1>
<h1 class="break-page">After page break</h1>
<button onclick="window.print()">Print</button>

@media print {
    .break-page {
        page-break-before: always;
    }
}

将 break-after 属性设置为分页以在 HTML 中分页

我们可以将一个元素的 break-after 属性设置为 page 以在 HTML 中分页。 它将在使用该属性的元素之后中断页面。

然后，我们可以像上面的方法一样使用 window.print() 打印 HTML 页面。 此方法与上述方法不同，因为它不使用 @media 打印规则。

例如，照常创建两个标题。 在标题之间，创建一个空的 div 并给它一个类名 break-page。

接下来，使用调用 window.print() 方法的 onclick 侦听器创建一个可单击的按钮。

选择 break-page 类并在 CSS 中将其 break-after 属性设置为 page。

打印时第一个标题后分页。 这样，我们就可以在HTML中使用break-after属性来分页了。

示例代码：

<h1>
Before page break
</h1>
<div class="break-page"></div>
<h1>
After page break
</h1>
<button onclick="window.print();" />Print</button>
.break-page {
    break-after: page;
}