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

有没有办法在HTML/CSS中放入一些东西,将向浏览器发出信号,它需要在此时强制换页(开始一个新页面)?

我不需要它在每个浏览器中都能运行,我想我可以告诉人们使用特定的浏览器来打印它。


当前回答

当我们在浏览器上使用打印命令时,我需要在每第三行之后分页。

我添加了

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

在每第三行之后,我的父div有display: flex; 所以我删除了display: flex;而且一切都如我所愿

其他回答

试试这个链接

<style>
@media print
{
h1 {page-break-before:always}
}
</style>

中引入分页符的位置,可以添加样式为“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”),在浏览器中,所有三个块依次出现。

我为此挣扎了一段时间,但从未奏效。

最后,解决方案是在头部放置一个样式元素。

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

CSS

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

HTML

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

例如: 下面的代码出现在页面的末尾,你想强制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>&nbsp;Main</b>
                                </td>
                                <td>
                                    #Project<b>&nbsp;Project</b>
                                </td>
                                <td>
                                    #TypeMainProj<b>&nbsp;Main + Project</b>
                                </td>
                                <td>
                                    #Imprest<b>&nbsp;Imprest</b>
                                </td>
                            </tr>
                        </table>