CSS 页码不起作用

问题描述 投票:0回答:3

我尝试使用 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(包管理器中的最新版本)

有什么想法吗?

css printing
3个回答
1
投票

浏览器对此的支持达不到标准。

@page {margin: 2in} 在新版本的 Firefox 中支持,但不支持 @page 的其他参数。 我相信其他浏览器也是如此。


0
投票

您的文件应如下所示。请注意,页计数器很特殊,不需要设置和递增。

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>

0
投票

十多年过去了,浏览器供应商在这方面仍然让我们失望。幸运的是,有一个解决方法:另存为 PDF,然后将 PDF 文件上传到 I ♥ PDF添加 PDF 页码

网络应用程序

分页的外观可以进行一定程度的定制。有多种字体可供选择,位置和大小也可以调整。这不是“专业排版”程度的控制,但对于大多数情况来说可能已经足够了。

与任何在线工具一样,在使用之前应考虑隐私问题。作者已发布他们的数据隐私和安全政策

希望这对你们中的一些人来说是一个实用的解决方案。

© www.soinside.com 2019 - 2024. All rights reserved.