Question

我已经完成了创建报告，下一步是创建一个将在每个页面中打印的标题。我尝试过使用How to use HTML to print header and footer on every printed page of a document?中提供的解决方案 - 但它们似乎在webkit浏览器上运行不正常。

您是否知道在我的报告中实施此选项？

Answer 1

如果使用div标签，则在每个页面上打印页眉和页脚都是非常困难的任务。在我的项目中，我搜索了几乎完整的网页，发现每页打印页眉和页脚都必须使用表格和CSS规则，而不使用表格和CSS，你不能在每个页面上打印标题。我正在为您提供以下代码：

<style>
    @media screen{thead{display:none;}}
    @media print{thead{display:table-header-group; margin-bottom:2px;}}
    @page{margin-top:1cm;margin-left:1cm;margin-right:1cm;margin-bottom:1.5cm;}}
</style>

第一个CSS规则使得用户不会在屏幕上显示表格，第二个规则定义在打印期间，thead显示为table-header-group，因为如果省略此规则，此规则将在每个页面上显示标题标题不会打印在每个页面上，第三个规则是用于保持页边距不重叠页眉或页脚，你的html代码将如下所示：

<table>
    <thead>
        <tr>
            <th>  <---  Your header text would be placed here    --->  </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <--- Your printing text would be place here    ---> 
            </td>
        </tr>
    </tbody>
</table>

最后，我在IE，Safari，Firefox和Chrome上试过了一些东西代码，并且想告诉你，在Chrome上，标题只在第一页打印。我也多次报告过该错误，但Chrome对这个问题没有做任何事情。

Answer 2

您可以使用iframe，但我不建议不使用它。

如果您动态创建报告，最好的办法是在创建时将标题添加到创建的页面。毕竟这是最广泛使用的技术。

另一个选项可能是使用css content属性。

div#main:before {
    content: "<p>I appear before the div tag</p><hr />"
}

注意：如果指定了IE8，the content property仅支持!DOCTYPE。

Answer 3

截至今天，webkit.org上的错误仍未解决：https://bugs.webkit.org/show_bug.cgi?id=17205

使用将HTML转换为PDF的webkit引擎时遇到了同样的问题。这对我有用：

首先让您的css适用于所有媒体类型

<style type="text/css" media="all">

确保设置thead的显示属性：

thead { display: table-header-group;}

最后一个，解决问题，表中的行会在分页符时被页眉或行切成两半而重叠

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead tr th{ height: 50px;}

Answer 4

看看这个： http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/

在每页中打印标题

4 个答案: