HTML中有没有让打印时强制分页的代码?

Posted 2023-04-26

一个网页很长,需要打印,需要分页。但是浏览器自动分页会拆得乱七八糟。有没有强制分页的html代码，让它在一个指定的地方分页？如果没有，请问有没有比较好的让它分页的方案？

HTML没有这样的代码,但是CSS却有.可以用
page-break-after, page-break-before, page-break-inside
来控制打印分页. 参考技术A 你可以使用jquery的 前端分页

我可以在 HTML 打印中强制分页吗？

【中文标题】我可以在 HTML 打印中强制分页吗？

【英文标题】：Can I force a page break in HTML printing?

【发布时间】：2010-12-12 10:50:58

【问题描述】：

我正在制作一个可打印的 HTML 报告，它的“部分”应该从新页面开始。

有什么方法可以在 HTML/CSS 中添加一些内容，向浏览器发出信号，表明它此时需要强制分页（开始一个新页面）？

我不需要在所有浏览器中都使用它，我想我可以告诉人们使用一组特定的浏览器来打印它。

【参考方案1】：

添加一个名为“pagebreak”（或“pb”）的 CSS 类，如下所示：

@media print 
    .pagebreak  page-break-before: always;  /* page-break-after works, as well */

然后在需要分页符的位置添加一个空的 DIV 标记 (or any block element that generates a box)。

<div class="pagebreak"> </div>

它不会显示在页面上，但会在打印时打破页面。

附：也许这只适用于使用-after 时（以及您可能对页面上的其他<div>s 所做的其他事情），但我发现我必须按如下方式扩充CSS 类：

@media print 
    .pagebreak 
        clear: both;
        page-break-after: always;
    

【讨论】：

但是就像 CSS 中的所有好东西一样，这并不总是能始终如一地工作，所以测试一下它的生活日光，以免你有愤怒的用户想知道为什么你的网站打印成堆的额外空白页！

根据 MDN，page-break-after“适用于生成框的块元素”，因此使用空的 <span> 元素将不起作用。将其应用于您的一段内容是一个更好的主意。见developer.mozilla.org/en-US/docs/Web/CSS/page-break-after

@nullability：很好。在我以前的工作中，我主要在 WinForms 中的 WebBrowser 控件中使用它，该控件使用 IE，这是遵循标准的黄金标准。

这在 Chrome 中对我不起作用...我正在尝试在 中的 之后在内部进行分页符，在这种情况下会起作用吗？ 由于某种原因，在 Chrome 中使用此技巧时，下一页的 1 行像素泄漏到前一页（使用背景颜色时很明显）。我使用.pagebreak min-height: 1px; page-break-before: always; 修复了它

【参考方案2】：

试试这个link

<style>
@media print

h1 page-break-before:always

</style>

【讨论】：

我认为这是一个更好的答案，因为它不涉及破坏 HTML 以实现视觉效果。

我实际上更喜欢另一个，因为它给了我更多的控制权。我总是可以将“分页符”类分配给应该使页面跳转的 H1。但这仍然是一个很好的解决方案。为@media +1，虽然我猜屏幕应该忽略page-break-before。谢谢！

h1 是可以用作打印中断标记的示例。您可以在其中替换和标记您喜欢的名称。你也可以使用 page-break-after:always

h1 不是一个很好的例子，因为它表示一级标题，而一个页面通常应该只有一个这样的标题。

如果你想跳过第一页的第一个页眉，试试h1:not(:first-child) page-break-before:always;

【参考方案3】：

First page (scroll down to see the second page)
<div style="break-after:page"></div>
Second page
<br>
<br>
<button onclick="window.print();return false;" />Print (to see the result) </button>

只需在需要跳转到下一个页面的位置添加此内容（文本“page 1”将位于第 1 页，文本“page 2”将位于第二页）。

Page 1
<div style='break-after:always'></div>
Page 2

这也有效：

First page (there is a break after this)
<div style="break-after:page"></div>
Second page (This will be printed in the second page)

【讨论】：

page-break-after 已被break-after 取代，参考这里：link。

【参考方案4】：

只是想更新一下。 page-break-after 现在是旧版属性。

官方page状态

此属性已被break-after 属性替换。

【讨论】：

需要注意的是，这个属性只有微软IE和Edge浏览器支持。 caniuse.com/…

【参考方案5】：

您可以使用 CSS 属性 page-break-before（或 page-break-after）。只需在应该从新行开始的那些块级元素（例如，标题、div、p 或 table 元素）上设置 page-break-before: always。

例如，要在任何 2 级标题之前和 newpage 类中的任何元素（例如，<div class=newpage>...）之前导致换行，您可以使用

h2, .newpage  page-break-before: always 

【参考方案6】：

试试这个（它在 Chrome、Firefox 和 IE 中工作）：

... content in page 1 ...
<p style="page-break-after: always;">&nbsp;</p>
<p style="page-break-before: always;">&nbsp;</p>
... content in page 2 ...

【参考方案7】：

假设您的博客包含这样的文章：

<div class="article"> ... </div>

只需将其添加到 CSS 中即可：

@media print 
  .article  page-break-after: always; 

（在 Chrome 69 和 Firefox 62 上测试并运行）。

参考：

https://www.w3schools.com/cs-s-ref/pr_print_pageba.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after ;重要提示：这里说的是This property has been replaced by the break-after property.，但break-after 对我不起作用。此外，关于 break-after 的 MDN 文档似乎并不特定于分页符，所以我更喜欢保留（工作）page-break-after: always;。

【参考方案8】：

CSS

@media print 
  .pagebreak  
     page-break-before: always; 
  

HTML

<div class="pagebreak"></div>

【参考方案9】：

当我们在浏览器上使用打印命令时，我需要在每 3 行后换一个分页符。

我加了

<div style='page-break-before: always;'></div>

在每第三行之后，我的父 div 有 display: flex; 所以我删除了display: flex;，它可以正常工作。

【参考方案10】：

我为此苦苦挣扎了一段时间，它从来没有奏效。

最后解决的办法是在头部放一个样式元素。

page-break-after 不能在链接的 CSS 文件中，它必须在 HTML 本身中。

【讨论】：

在 html 中的 <style> 头中，或者它应该内联在要应用 page-break-after 的元素中。

【参考方案11】：

我们可以在要在 html页面。 “page-break-before”也有效

例子：

HTML_BLOCK_1
<p style="page-break-after: always"></p>
HTML_BLOCK_2
<p style="page-break-after: always"></p>
HTML_BLOCK_3

在使用上述代码打印 html 文件时，打印预览将显示三个页面（每个 html 块 "HTML_BLOCK_n" 一个），在浏览器中，所有三个块依次出现另一个。

【参考方案12】：

First page (scroll down to see the second page)
<div style="break-after:page"></div>
Second page
<br>
<br>
<button onclick="window.print();return false;" />Print (to see the result) </button>

【参考方案13】：

以下代码对我有用，还有更多示例Here

  <div style="page-break-inside:avoid;page-break-after:always">
  </div>

【参考方案14】：

@Chris Doggett 非常有意义。 虽然，我在lvsys.com 上发现了一个有趣的技巧，它实际上适用于 Firefox 和 chrome。只需将此评论放在您想要插入分页符的任何位置。您还可以将<p> 标记替换为任何块元素。

<p><!-- pagebreak --></p>