javascript 打印网页时在每个打印页面的底部添加文本页脚
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4048996/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding a text footer to the bottom of every printed page when a web page is printed
提问by Thomas
Is there a technique for adding a text footer the bottom of each page when it is printed? For example "Copyright My Company 2010" - I know there is probably a way to do this with a background image using CSS, but I would really like to use text for this portion so the client can edit it. Any ideas?
是否有一种技术可以在打印时在每页底部添加文本页脚？例如“Copyright My Company 2010” - 我知道可能有一种方法可以使用 CSS 对背景图像执行此操作，但我真的很想在这部分使用文本，以便客户可以对其进行编辑。有任何想法吗？
回答by Andrew Vit
CSS doesn't have any notion of page media, so it's going to be impossible to guarantee where the page breaks are going to occur naturally.
CSS 没有任何页面媒体的概念，因此无法保证分页符会自然发生在何处。
EDITAs pointed out below, CSS 2.1 did introduce @pageas a way to deal with paged media, but it was never implementedacross the common browsers. So, as I wrote above, it doesn't exist, although that's not technically true.
编辑正如下面所指出的，CSS 2.1 确实@page作为一种处理分页媒体的方式引入，但它从未在常见浏览器中实现。所以，正如我上面写的，它不存在，尽管这在技术上不是真的。
You can set hard page breaks, e.g. by placing a <div class="page-break">at the approximate locations. You can then style it with page-break-before:alwaysto ensure that a break happens there.
您可以设置硬分页符，例如通过<div class="page-break">在大致位置放置。然后，您可以对其进行样式设置，page-break-before:always以确保在那里发生中断。
There's also a page-break-afterproperty; but then you don't know how far down the page the element starts. So, when you need to position it, the only thing you can use is position:absolute;bottom:0which wouldn't fix it to the page media, but to the bottom of the whole document.
还有一个page-break-after属性；但是你不知道元素在页面下方的位置。因此，当您需要定位它时，您唯一可以使用的是position:absolute;bottom:0它不会将其固定到页面媒体，而是固定到整个文档的底部。
If you use page-break-beforethen you know it always appears at the top of the page. Then, you can use position:absolutewithout giving a topor bottom, which results in only taking it out of the document flow. Then, giving it a height of 720pt (10 inches) means you have a bottom edge that you can position content against.
如果您使用，page-break-before那么您知道它总是出现在页面顶部。然后，您可以在position:absolute不提供topor 的情况下使用bottom，这只会将其从文档流中取出。然后，给它一个 720pt（10 英寸）的高度意味着你有一个可以放置内容的底部边缘。
Here's how I would tackle it:
这是我将如何解决它：
/* hide the page footer on screen display */
.page-break { display: none; }
@media print {
/* make a 10-inch high block that sits on top of the page content */
.page-break {
page-break-before: always;
display: block;
position: absolute;
height: 720pt;
}
/* stick the contents of .page-break to the bottom of the 10 inch block */
.page-break .copyright {
position: absolute;
bottom: 0px;
}
}
However, I have no idea how well browsers actually support this in reality. I remember playing with page breaks a while back, and ended up giving up because I couldn't get them to work reliably enough. I suspect it's still either impossible or very hackish and unreliable.
但是，我不知道浏览器在现实中实际支持的程度如何。我记得前一阵子玩分页符，最后放弃了，因为我无法让它们足够可靠地工作。我怀疑这仍然是不可能的，或者是非常黑客和不可靠的。
回答by JohanB
The W3C Working Draft for CSS Paged Media Module Level 3 contains a method to print in the margins.
CSS Paged Media Module Level 3 的 W3C 工作草案包含一种在边距中打印的方法。
Try this code, but it might not be widely supported yet.
试试这个代码，但它可能还没有得到广泛支持。
@page {
margin: 2cm; 2cm; 2cm; 2cm;
@bottom-center { content: "Copyright My Company 2010" }
@top-right { content: counter(page) }
}
