首页 文章

有没有办法在每个页面上打印网页页眉/页脚?

提问于
浏览
38

根据我的研究,似乎我想做的事情是不可能的,但是如果事情发生了变化,我想检查是否有人想出办法来做到这一点 .

我有一个Web应用程序,它根据浏览器窗口中的用户选择生成打印报告 . 我有一个自定义页眉和页脚,当从浏览器打印报告时,应在每个打印页面上重复 . 它不是我需要的浏览器页眉和页脚,而是我生成的自定义页眉和页脚 . 另外,我不认为这是CSS和媒体类型的问题,但我不是CSS专家 . 我没有问题让页眉和页脚打印一次,但我不能让它们在每页上打印 . 我已经读过,如果我使用表重新创建报表页面,然后使用表头标记和CSS,这可能至少可以在每个页面上获取 Headers . 我还没有成功,但如果它是唯一的选择,我会再试一次 . 一位同事建议我在我的php中计算行数并根据需要手动输出页眉和页脚 . 我想这是一个选项,但它似乎应该有一种方法来做到这不是那么“蛮力”!

另一个需要注意的是,我必须支持IE 6,所以我怀疑我尝试过的一些CSS内容是不受支持的 .

如果有人知道如何做到这一点,那将是伟大的!如果没有,我将不得不重新考虑我的方法 .

提前致谢!

UPDATE (14 Dec 2011)

我在这个问题上取得了相当大的进步,并且使用了答案中的一些信息,我确实生成了可用的报告,但从未如我所希望的那样好或专业 . 页脚的页面底部往往不够接近,我不得不做大量的猜测工作和"brittle"关于插入分页符决定大文本的计算方法,我只能支持一组受限制的页面格式,以及对报告的任何更改都会导致一系列代码更改,但更加脆弱的计算 . 总有一种情况打破了某些报道的某些部分 . 我们重新审视了这些要求, and are now generating reports as PDFs using TCPDF . 文档有点不透明,需要进行一些实验,但结果要好得多,现在报告应该显示出来 . 我会对任何试图从浏览器做HTML报告的人说,除非它们非常简单,省去挫折(正如其他人在这里告诉我的那样)并使用PDF或类似的东西 .

4 回答

  • 5

    我建议将页面分成表格,并将 Headers 部分添加到第一行,将页脚部分添加到最后一行 . 第一行和最后一行之间的行的内容可以动态更改,因此您将获得所需页面的常量页眉和页脚 .

    ----------
    ROW1    HEADER
    ----------
    ROW2   
     Insert dynamic contents here
    ROW N-1
    ----------
    ROW N Footer
    

  • 5

    尝试生成(rtf | pdf)文档进行打印

  • 3

    这将适用于某些浏览器,而不是全部 . 我不认为有一个优雅的跨浏览器解决方案

    在页面上的div中包含所需的打印页脚/页眉(在此示例中为div id ='printableFooter')

    在屏幕css文件中放:

    #printableFooter {display: none;}
    

    在print css文件中:

    #printableFooter {display: block; position: fixed; bottom: 0;}
    
  • 33

    它可以通过表来完成 - 而且我知道我将通过建议使用表格进行布局来冒险进行投票 - 但我们在这里谈论IE6并不是因为其出色的CSS支持而闻名:-)

    如果您设置CSS样式如下:

    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
    

    然后,当您创建HTML时,将您的身体渲染为:

    <body>
    <table>
       <thead><tr><td>Your header goes here</td></tr></thead>
       <tfoot><tr><td>Your footer goes here</td></tr></tfoot>
       <tbody>
         <tr><td>
         Page body in here -- as long as it needs to be
         </td></tr>
       </tbody>
    </table>
    </body>
    

    是的它不好(表格与CSS),它并不理想,但(对你而言很重要)它确实可以在IE6上运行 . 我无法对Firefox发表评论,因为我没有在那里测试过,但它应该可以完成这项工作 . 这也将处理不同大小的页面,不同的字体大小等,所以它应该“正常工作” .

    如果您希望页眉和页脚仅出现在打印介质上,请使用@media参数执行正确的操作:

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

    Note
    截至2015年7月,这仍然只适用于Firefox和IE . 基于Webkit的浏览器(参见Chrome,Safari)在他们的问题跟踪器中存在长期存在的错误,如果有人有足够强烈的投票支持他们:

    这个问题下面的评论告诉我现在Chrome已经解决了 . 我没有检查过自己:-)

    针对Chrome的原始错误(供参考)是:

相关问题