我尝试使用 CSS3 的
@page
和 counter(page)
功能,但我看不到任何添加到打印输出的页码。无论我做什么,看起来这根本不起作用。
我的脚手架看起来像这样:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
@page {
counter-increment: page;
counter-reset: page 1;
@top-right {
content: "Page " counter(page) " of " counter(pages);
}
}
</style>
<head>
<body>
<div>
Lorem ipsum dolor...
/* this gets long, 2 pages of text */
</div>
</body>
</html>
我测试的方法是在浏览器中打开页面,将其打印到 PDF 文件,最后验证内容。在不同的浏览器中,输出有点不同,但我在任何地方都看不到正确的页码。
操作系统:Linux Mint
浏览器:Chromium 25.0.1364.160、Firefox 20.0.1、Opera(包管理器中的最新版本)
有什么想法吗?
浏览器对此的支持达不到标准。
@page {margin: 2in} 在新版本的 Firefox 中支持,但不支持 @page 的其他参数。 我相信其他浏览器也是如此。
您的文件应如下所示。请注意,页计数器很特殊,不需要设置和递增。
Firefox、webkit 和我认为 Opera 也不支持 css3 页面,所以它不起作用。新版本的 IE 也不会,尽管 MSDN 暗示它们会这样做。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
@page {
@top-right {
content: "Page " counter(page) " of " counter(pages);
}
}
</style>
<head>
<body>
<div>
Lorem ipsum dolor...
/* this gets long, 2 pages of text */
</div>
</body>
</html>