在 html 中打印时分页-ag捕鱼王app官网

当前位置：ag捕鱼王app官网 > > web前端 > html >

vue react javascript angular css html

在 html 中打印时分页

作者：迹忆客最近更新：2023/05/05 浏览次数：

本文将介绍几种在打印 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 breakh1>
<button onclick="window.print()">printbutton>
@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 breakh1>
<button onclick="window.print()">printbutton>

@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();" />printbutton>
.break-page {
    break-after: page;
}