html5 – 具有运行页眉和页脚的多页文档的CSS和HTML打印设置

我正在做噩梦,想弄清楚如何正确设置CSS和 HTML布局,以便在我们的网络应用程序中打印文档.我们有不同的文件进入系统(订单,发票,交货单,……).文件包括：

>静态标题(公司徽标,联系信息)
>身体

>客户数据(运费,账单地址)
> items表(包含多行的表,可以通过多个页面传播)

>静态页脚(免责声明)

我想要的是遵循打印功能：

>如果正文通过多个页面传播,我希望每页上都有静态页眉和页脚
>如果项目表在更多页面中传播,则每个页面中都会打印一个表格标题

目前我的HTML布局是这样的：

<!-- STATIC HEADER -->
<div id="pageHeader">
    <table class="table">
        <tr>
            <td>Static header content here</td>
        </tr>
    </table>
</div>

<!-- DOCUMENT CONTENT -->
<div id="pageBody">

    <!-- Customer data -->
    <table class="table">
        <tr>
            <td>Customer data here</td>
        </tr>
    </table>

    <!-- Items table -->
    <table class="table table-condensed table-print">
        <thead style="display:table-header-group;">
            <tr>
                <th>Table header here</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Rows here</td>
            </tr>
        </tbody>
    </table>

</div>

<!-- STATIC FOOTER -->
<div id="pageFooter">
    <table class="table">
        <tr>
            <td>Static footer content here</td>
        </tr>
    </table>
</div>

我正在阅读关于在this question回答后运行页眉和页脚的内容,但我没有得到预期的结果.目前我的CSS设置如下：

#pageHeader,#pageFooter { display: none; }

@media print {
    #pageHeader { display: block; position: running(pageHeader); width: 100%; }
    #pageFooter { display: block; position: running(pageFooter); width: 100%; }
}

@page {
    @top-center {
        content: element(pageHeader);
    }

    @bottom-center {
        content: element(pageFooter);
    }
}

Firefox给了我完全奇怪的结果.它首先打印一个空白页,然后第二页是好的,如果它是单页文档,如果它是一个多页文档,那么它只打印第一页,其他页被忽略.

谷歌浏览器略胜一筹.它打印所有页面,但它不会在每个页面上打印静态页眉和页脚.标题仅在第一页打印,而页脚仅在最后一页打印.

另一个问题是,如果表通过多个页面传播,那么可以通过多个页面传播的主表不会在每个页面中打印表头.我以为显示：table-header-group; on< thead>应该这样做？

这是不可能实现的还是我做错了什么？如果你能给我任何关于如何处理这个问题的建议或策略,我将非常高兴.由于此应用程序在受控环境中运行,我可以专注于一个或两个浏览器(Chrome和Firefox会很棒).如果它在两者都有效是奖金！

解决方法

关注同样的问题,我做了一些研究.在这里我的结果：

display：table-header-group;在chrome / chrome / webkit /中不起作用,因为它没有实现.自4年以来就有一个未决问题.
https://code.google.com/p/chromium/issues/detail?id=24826

你想使用@ top-center和@ bottom-center.这将是一个伟大的想法.它在这里声明了http：//www.w3.org/TR/2013/NOTE-css-print-20130314/#at-rules但是参考http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)#Grammar_and_rules它没有被任何布局引擎实现.
我不知道为什么它在这里提到http://alistapart.com/article/boom.任何人都有任何想法？

你在第一页上得到你的标题而在最后一页上得到页脚的原因很简单：只需剪掉@page部分你会看到：@media print {… display：block …如果您将页脚声明在顶部,则它不起作用.