当前位置: 首页 > 面试题库 >

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

司空镜
2023-03-14
问题内容

根据我的研究,看来我想做的事是不可能的,但是如果情况有所变化,我想检查一下是否有人想出办法。

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

另一个警告是,我必须支持IE 6,因此我怀疑我尝试过的一些CSS东西不被支持。

如果有人知道这样做的话,那就太好了!如果没有,我将不得不重新考虑自己的方法。

提前致谢!

更新(2011年12月14日)

我在此问题上取得了长足的进步,使用答案中的一些信息,我确实生成了有用的报告,但从未达到我想要的那样出色或专业。页脚距离页面底部的距离往往不够大,我不得不做很多猜测工作,并且要对要插入插入分页符的粗大文本进行“易碎”计算,我只能支持一组页面格式,以及对报告的任何更改都会导致级联的代码更改和更加脆弱的计算。总有一种情况破坏了某些报告的一部分。我们修改了要求,
现在正在使用TCPDF生成PDF格式的报告
。该文档有点不透明,需要进行一些实验,但是结果要好得多,现在报告按预期显示。我想对任何尝试通过浏览器进行HTML报告的人说,除非它们非常简单,否则请避免麻烦(就像其他人在这里告诉我的那样),并使用PDF或类似的东西。


问题答案:

它可以用表来完成-我知道我建议通过使用表进行布局来冒风险,但是我们在这里谈论的是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上进行评论,因为我还没有在Firefox上进行过测试,但它可以胜任。这还将处理不同大小的页面,不同的字体大小等,因此它应该“正常工作”。

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

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

注意
自2015年7月起,这仍然仅在Firefox和IE中有效。
如果有人强烈投票支持基于Webkit的浏览器(例如Chrome,Safari),则它们在问题跟踪器中存在长期存在的错误:

这个问题下方的评论告诉我,这已在Chrome中解决。我没有检查自己:-)



 类似资料:
  • 问题内容: 亲爱的所有人,我尝试过CSS位置:固定属性,但是它在Firefox和IE(适用于IE6的hack)上可以正常工作,但对于Chrome则根本不起作用。我以为Chrome是最新的,将非常容易地支持它,但事实并非如此。我尝试了, 再次在IE和Firefox中运行,但在Chrome中出现了问题。请任何人对此有替代解决方案。 问题答案: 这是我使用的代码。注意我将html和正文高度都设置为100

  • 本文向大家介绍打印页面时怎样自定义打印页眉页脚或者去掉眉页脚?相关面试题,主要包含被问及打印页面时怎样自定义打印页眉页脚或者去掉眉页脚?时的应答技巧和注意事项,需要的朋友参考一下 <style type="text/css" media="print"> @page { size: auto; /* auto is the initial value / margin: 0mm; / this a

  • 问题内容: 我已经阅读了很多有关打印页码的网站,但是当我尝试打印html页面时,仍然无法显示它。 接下来是CSS代码: 我试图把这个页面规则放进去 在其外部,尝试将其放入中,但没有任何帮助使我在页面上显示页码。我尝试使用FireFox和Chrome(您知道基于WebKit的浏览器)。我认为问题出在我的HTML或CSS代码中。 有人可以告诉我一个在具有多个页面的大html页面中实现此规则的示例吗?我

  • 问题内容: 我有一个客户想打印的网页,而我遇到的麻烦是让页脚位于最后一个打印页面的底部,而不仅仅是内容结束时 我尝试了类似的东西 但它在每页末尾显示页脚。 也许我对CSS的要求太高了…可行吗? 我想我应该对 的(^_^)发疯 问题答案: 尝试将相对的身体和绝对的页脚定位: 借助CSS 3 Paged Media模块,您可以使用以下代码:

  • 问题内容: 我已经在SO和其他一些网站上以几种不同的方式问过这个问题,但是其中大多数要么太具体,要么已经过时。我希望有人可以在这里提供明确的答案,而不必担心猜测。 当有人在浏览器中打印时,是否可以使用CSS或javascript更改默认打印机设置?当然,“从他们的浏览器打印”是指某种形式的HTML,而不是PDF或其他依赖于插件的mime类型。 请注意: 如果某些浏览器提供了此功能,而另一些却不提供

  • 如何在Safari浏览器中通过JavaScript移除打印页面的页眉和页脚?大家好,我在尝试通过JavaScript在Safari浏览器中移除打印页面的页眉和页脚时遇到了问题。我知道在大多数浏览器中,可以通过用户的打印设置来手动禁用页眉和页脚,但我的目标是通过代码自动化这个过程,以便用户在打印网页内容时不会看到页眉和页脚。 请问有没有人知道如何在Safari中通过编程的方式实现这个功能?或者是否有