如何在HTML，CSS和JavaScript中添加打印页眉和页脚？ [英] How to add Print headers and footers in HTML, CSS and JavaScript?

问题描述

我有一个HTML和CSS的文档。我想在每个打印页面中都有页眉和页脚，这样当您按打印时，每个页面都有相同的页脚和页眉。有没有办法使用网络技术？

I have a document in HTML and CSS. I would like to have headers and footers in every printed page so that when you press Print, each page has the same footer and header. Is there a way to do this using web technologies? I can't find much information on printing besides page-break-after and so on.

推荐答案

这是我发现的：

您可以使用 position：fixed 和 top：0 或 bottom：0 将元素放置在每个页面的顶部/底部。但是，由于固定定位在IE6上不起作用，所以唯一的选择是使用 100％ height和 thead 和 tfoot 。这是一种魔法，以你想要的方式（让内容 thead 和 tfoot 出现在每个页面上）。如果你不关心IE6只是使用固定位置。

You can use position: fixed and top: 0 or bottom: 0 to position an element in top/bottom of each page. However, since fixed positioning does not work on IE6, the only choice for that is to use a table with 100% height and thead and tfoot. It is some sort of magic that works the way you want it to (to have the contents of thead and tfoot to appear on each page). If you don't care about IE6 just use fixed positioning.

但是，固定位置也意味着你在那里的任何内容可能会落在固定位置的元素。因此，实际上，页眉和页脚不占用任何空间。

However, fixed positioning also means that any content you have there may go behind the fixed positioned element. So, in effect, the header and the footer does not occupy any space.

您无法控制实际的页眉/页脚（例如打印的网址）。

You can't control the actual header/footer (e.g. the URL that is printed). The user has to disable those himself/herself.

令人痛苦的HTML / CSS打印的最佳替代方法是PDF。您可以控制每个页面的样式，它们的大小和页眉/页脚的大小。缺点是较慢的打印（生成PDF不像加载HTML页面那么快），以及使用一些PDF库工作的痛苦。

The best alternative to painful HTML/CSS printing is PDF. You can control how each page look like, what's the size of them and header/footer. The drawbacks are slower prints (generating PDF is not as fast as loading a HTML page) and the pain of working your way with some PDF library.

这篇关于如何在HTML，CSS和JavaScript中添加打印页眉和页脚？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！