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

Question

我正在做噩梦,想弄清楚如何正确设置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>

我正在阅读有关在这个问题上回答后运行页眉和页脚的内容,但我没有得到预期的结果.目前我的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给了我完全奇怪的结果.它首先打印一个空白页,然后第二页是好的,如果它是单页文档,如果它是一个多页文档,那么它只打印第一页,其他页被忽略.

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

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

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

Answer 1

Firefox 在打印 HTML 页面中的某些样式时遇到问题，这些样式在屏幕上显示正常，但由于这是机密信息，因此很难就尝试什么提供任何建议，并且建议破解该页面可能没有帮助。以下是一般性建议。

当您在某个特定网站上遇到问题时，“首先要尝试的事情”就是清除您的 Firefox 缓存并删除您为该网站保存的 cookie。

1. 绕过 Firefox 的缓存

   Use Ctrl+Shift+r to reload the page fresh from the server.

   Alternately, you also can clear Firefox's cache completely using:

   • orange Firefox button (or Tools menu) > Options > Advanced
   • On the Network mini-tab > Cached Web Content : "Clear Now"

   If you have a large hard drive, this might take a few minutes.

2. Remove the site's cookies (save any pending work first).

   While viewing a page on the site:

   • right-click and choose View Page Info > Security > "View Cookies"
   • Alt+t (open the classic Tools menu) > Page Info > Security > "View Cookies"

Then try reloading the page and logging in again. Does that help?