我正在制作一个HTML报告,将是可打印的,它有“部分”,应该在一个新的页面开始。
有没有办法在HTML/CSS中放入一些东西,将向浏览器发出信号,它需要在此时强制换页(开始一个新页面)?
我不需要它在每个浏览器中都能运行,我想我可以告诉人们使用特定的浏览器来打印它。
我正在制作一个HTML报告,将是可打印的,它有“部分”,应该在一个新的页面开始。
有没有办法在HTML/CSS中放入一些东西,将向浏览器发出信号,它需要在此时强制换页(开始一个新页面)?
我不需要它在每个浏览器中都能运行,我想我可以告诉人们使用特定的浏览器来打印它。
当前回答
假设你有一个博客,里面有这样的文章:
<div class="article"> ... </div>
只是把这个添加到CSS中对我有用:
@media print {
.article { page-break-after: always; }
}
(在Chrome 69和Firefox 62上测试和运行)。
参考:
https://www.w3schools.com/cssref/pr_print_pageba.asp https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after;重要提示:这里的This属性已经被break-after属性所取代。但这招对我没用。此外,MDN文档中关于断点后的内容似乎并没有针对换页,所以我更喜欢保持(工作)断点后的页面:always;。
其他回答
我为此挣扎了一段时间,但从未奏效。
最后,解决方案是在头部放置一个样式元素。
page-break-after不能在链接的CSS文件中,它必须在HTML本身中。
中引入分页符的位置,可以添加样式为“page-break-after: always”的分页符标记 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”),在浏览器中,所有三个块依次出现。
当我们在浏览器上使用打印命令时,我需要在每第三行之后分页。
我添加了
<div style='page-break-before: always;'></div>
在每第三行之后,我的父div有display: flex; 所以我删除了display: flex;而且一切都如我所愿
CSS
@media print {
.pagebreak {
page-break-before: always;
}
}
HTML
<div class="pagebreak"></div>
只是想更新一下。分页结束现在是一个遗留属性。
官方页面说明
此属性已被break-after属性取代。