Question

我创建了一个带有标题，部分内容和页脚的html页面。我试图获得HTML页面的打印，有2页。我得到了第一页的标题和最后一页的页脚。

我真正需要的是在所有页面中显示的页眉和页脚，如word文档。

Answer 1

您需要将整个内容包装在表格中，例如：

<强> HTML

<table>
    <thead>
        <tr><td>
            <!-- your header goes here -->
        </td></tr>
    </thead>
    <tbody>
        <tr><td>
            <!-- your content goes here -->
        </td></tr>
    </tbody>
    <tfoot>
        <tr><td>
            <!-- your footer goes here -->
        </td></tr>
    </tfoot>
</table>

...并添加以下 CSS ：

@media print {
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
}
@media screen {
    thead { display: block; }
    tfoot { display: block; }
}

我需要补充一点，这可能不适用于基于webkit的浏览器（截至目前），如Safari，Chrome和Opera。请在您要支持的所有浏览器上进行测试。
Chrome可能支持其他选项：将页眉和页脚设置为position:fixed，但在快速测试中，我无法避免与页面内容重叠（即超过一页的超长文本）。

附录
您可能拥有希望在分页时不会中断的内容元素 - 例如列出跨越多行文本的项目。为避免这种情况，您可以设置以下 CSS ：

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
          page-break-inside: avoid; /* Firefox */
               break-inside: avoid; /* IE 10+ */

Answer 2

有新的css技巧@media print

因此，您只需创建页眉和页脚，并在不打印时将其隐藏在主页面上。只需添加到css display：none

在打印时，您可以向css添加媒体并显示隐藏的页脚和标题：

@media print {
  #id{
     display:block;
  }
}

还要检查“CSS page-break-after Property” 它会让你有权打破页面

在打印html页面时添加页眉/页脚

2 个答案: