Question

所以我知道这个选项：Page numbers with CSS/HTML。

到目前为止，似乎是将页码添加到页面的打印版本的最佳方式，但我无法在任何地方获得任何变化。我在Chrome，Firefox和IE9上试过我的Windows 7机器。根据一些链接，看起来像Prince XML这样的更专有的软件可能会支持这种链接。 Web浏览器是否支持打印版本？

我试过制作一个空白的html文件，并在两个样式标签之间添加：

@page {
  @bottom-right {
    content: counter(page) " of " counter(pages);
  }
}

我甚至简化了它，只是使用content: "TEXT";来查看是否可以显示某些内容。这是否支持任何地方？ “这个”我特别指的是@page和@bottom-right标签，因为我已经有多次内容工作了。

Answer 1

我一直在努力实现分页媒体，并且根据这个维基百科页面发现，目前还没有浏览器支持边距框。难怪它不会起作用！

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)

参见表格，语法和规则，边距框部分。边距框是页面编号以及页眉和页脚运行所需要的。实现这一点将节省我必须将打印介质转换为PDF的开销。

Answer 2

不使用@page，但我在Firefox 20中使用了纯CSS页码：

http://jsfiddle.net/okohll/QnFKZ/

要进行打印，请右键单击结果框（右下角）并选择

此框架 - ＆gt;打印框架......

CSS

#content {
    display: table;
}

#pageFooter {
    display: table-footer-group;
}

#pageFooter:after {
    counter-increment: page;
    content: counter(page);
}

，HTML是

<div id="content">
  <div id="pageFooter">Page </div>
  multi-page content here...
</div>

Answer 3

这似乎不再起作用了。看起来它只能在短时间内工作，浏览器支持已被删除！

根据https://developer.mozilla.org/en-US/docs/CSS/Counters，计数器必须先重置才能使用。

您可以将起始编号设置为任意值，默认值为0.

示例：

@page {
    counter-increment: page;
    counter-reset: page 1;
    @top-right {
        content: "Page " counter(page) " of " counter(pages);
    }
}

理论上......在现实世界中，只有PrinceXML支持这一点。

Answer 4

通过Mozilla，（api description）

这会在每个打印页面上放置页眉和页脚。这在Mozilla中效果很好，但在IE和Chrome中效果不是很好。

 gapi.client.request({
   root: 'https://classroom.googleapis.com',
   path: 'v1/courses',
   params: {
     'pageSize': 1,
     'teacherId': 'me'
   }
 })

CSS：

{
    "startedDateTime": "2016-03-25T21:08:16.672Z",
    "time": 957.9219999995985,
    "request": {
      "method": "GET",
      "url": "https://content-classroom.googleapis.com/v1/courses?pageSize=1&teacherId=me",
      "httpVersion": "unknown",
      "headers": [
        {
          "name": "X-Goog-Encode-Response-If-Executable",
          "value": "base64"
        },
        {
          "name": "X-Origin",
          "value": "https://www.lucidpress.com"
        },
        {
          "name": "X-ClientDetails",
          "value": "appVersion=5.0%20(X11%3B%20CrOS%20x86_64%207834.61.0)%20AppleWebKit%2F537.36%20(KHTML%2C%20like%20Gecko)%20Chrome%2F49.0.2623.95%20Safari%2F537.36&platform=Linux%20x86_64&userAgent=Mozilla%2F5.0%20(X11%3B%20CrOS%20x86_64%207834.61.0)%20AppleWebKit%2F537.36%20(KHTML%2C%20like%20Gecko)%20Chrome%2F49.0.2623.95%20Safari%2F537.36"
        },
        {
          "name": "User-Agent",
          "value": "Mozilla/5.0 (X11; CrOS x86_64 7834.61.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.95 Safari/537.36"
        },
        {
          "name": "Referer",
          "value": "https://content-classroom.googleapis.com/static/proxy.html?sensitive_query_string?"
        },
        {
          "name": "X-JavaScript-User-Agent",
          "value": "google-api-javascript-client/1.1.0-beta"
        },
        {
          "name": "X-Referer",
          "value": "https://www.lucidpress.com"
        }
      ],
      "queryString": [
        {
          "name": "pageSize",
          "value": "1"
        },
        {
          "name": "teacherId",
          "value": "me"
        }
      ],
      "cookies": [],
      "headersSize": -1,
      "bodySize": 0
    },
    "response": {
      "status": 200,
      "statusText": "",
      "httpVersion": "unknown",
      "headers": [
        {
          "name": "date",
          "value": "Fri, 25 Mar 2016 21:08:18 GMT"
        },
        {
          "name": "content-encoding",
          "value": "gzip"
        },
        {
          "name": "x-content-type-options",
          "value": "nosniff"
        },
        {
          "name": "server",
          "value": "ESF"
        },
        {
          "name": "x-frame-options",
          "value": "SAMEORIGIN"
        },
        {
          "name": "vary",
          "value": "Origin"
        },
        {
          "name": "vary",
          "value": "X-Origin"
        },
        {
          "name": "vary",
          "value": "Referer"
        },
        {
          "name": "content-type",
          "value": "application/json; charset=UTF-8"
        },
        {
          "name": "status",
          "value": "200"
        },
        {
          "name": "alternate-protocol",
          "value": "443:quic,p=1"
        },
        {
          "name": "cache-control",
          "value": "private"
        },
        {
          "name": "alt-svc",
          "value": "quic=\":443\"; ma=2592000; v=\"31,30,29,28,27,26,25\""
        },
        {
          "name": "content-length",
          "value": "198"
        },
        {
          "name": "x-xss-protection",
          "value": "1; mode=block"
        }
      ],
      "cookies": [],
      "content": {
        "size": 206,
        "mimeType": "application/json",
        "text": "{\n  \"nextPageToken\": \"some_string_token_sensitive?"\n}\n"
      },
      "redirectURL": "",
      "headersSize": -1,
      "bodySize": -1,
      "_transferSize": 448
    },
    "cache": {},
    "timings": {
      "blocked": 2.4730000004638,
      "dns": -1,
      "connect": -1,
      "send": 0.8660000003146702,
      "wait": 953.5609999984446,
      "receive": 1.0220000003754421,
      "ssl": -1
    }
  },

Answer 5

如果您想在 Chrome/Chromium 下打印时添加页码，一种简单的解决方案是使用 Paged.js。

这个 JS 库接受您的 HTML/CSS 并将其切割成页面，准备打印成书，您将在浏览器中预览。它使 @page 和大多数 CSS3 规范适用于 Chrome。

解决方案 1（简单）如果您可以将视图切成页面，准备打印

只需将他们的 CDN 添加到您页面的 head 标记中即可：

<link href="path/to/file/interface.css" rel="stylesheet" type="text/css">

然后您可以使用自动计数器 page 添加页码。示例：

HTML 放在任何你想显示当前页码的地方：

<div class="page-number"></div>

使数字出现在 div 中的 CSS :

.page-number{
  content: counter(page)
}

该库还允许轻松管理页边距、页脚、页眉等。

解决方案 2（更棘手）如果您只想在打印时显示数字（和分页符）

在这种情况下，您只需要在打印文档时应用 Paged.js CDN。我能想到的一种方法是添加一个 print me 按钮来触发 Javascript：

将 CDN 添加到页面
然后执行 window.print();启动导航器的打印提示

浏览器支持CSS页码

5 个答案:

解决方案 1（简单）如果您可以将视图切成页面，准备打印

解决方案 2（更棘手）如果您只想在打印时显示数字（和分页符）