我正在制作一个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;。
其他回答
下面的代码为我工作,还有一些更多的例子在这里
<div style="page-break-inside:avoid;page-break-after:always">
</div>
第一页(向下滚动查看第二页) < div风格= "后休息:页面" > < / div > 第二个页面 < br > < br > <button onclick="window.print();return false;"/>打印(查看结果)</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)
克里斯·道格特说得很有道理。 不过,我在lvsys.com上发现了一个有趣的技巧,它实际上在firefox和chrome上都有效。只需将此注释放在您希望插入换行符的任何位置。您还可以将<p>标记替换为任何块元素。
<p><!-- pagebreak --></p>
试试这个链接
<style>
@media print
{
h1 {page-break-before:always}
}
</style>
例如: 下面的代码出现在页面的末尾,你想强制HTML打印在另一个页面上,这样你就可以这样编码
<table>
<tbody>
<tr>
<td width="180" valign="top">
<p>
<strong> </strong>
</p>
<p>
<strong> </strong>
</p>
<p>
<strong> </strong>
</p>
<p>
<strong> </strong>
</p>
<p align="center">
<strong>Approved by Director</strong>
</p>
</td>
</tr>
</tbody>
</table>
主要代码在这里:期望的答案
<div style="page-break-inside:avoid;page-break-after:always"></div>
现在像这样编写第二页/另一页的其余代码
<table border="1">
<tr class="center">
<td>
#Main<b> Main</b>
</td>
<td>
#Project<b> Project</b>
</td>
<td>
#TypeMainProj<b> Main + Project</b>
</td>
<td>
#Imprest<b> Imprest</b>
</td>
</tr>
</table>