Chrome 不支持 css @page？

Question

我有 css 用于打印，就像这样简单：

@page {
  @top-left {
    content: "TOP SECRET";
    color: red
  }
  @bottom-center {
    content: counter(page);
    font-style: italic
  }
}

但是 Chrome 打印预览并保存到 pdf 似乎根本无法识别这一点。 打印时如何正确设置 header 和页脚？

编辑： @page由 none ref支持

但是，我还有其他选择吗？ 我不在网站上工作。 该产品只需要一个 pdf 作为结果。 我可以接受chrome 、 webkit 、 plantomjs等。

Answer 1

您可以使用开放工具 PagedJS 来呈现 iframe 或使用 CSS 分页媒体规范的整个页面。 https://pagedjs.org/

该工具是一种 polyfill，可将您发布的块（浏览器未实现的 CSS Paged Media）转换为浏览器兼容的 html/css。

它还有一个 CLI 替代方案，可以设置 puppeteer 并创建 PDF 输出： https://gitlab.coko.foundation/pagedjs/pagedjs-cli

Answer 2

据我所知，分页媒体的 CSS 功能主要用于为打印而呈现的系统，而不是为屏幕（浏览器）或浏览器的打印功能呈现的系统。 用于打印的 HTML/CSS 引擎的一个例子是 Prince。 所以，@page 不能在浏览器中工作，也不是（据我所知）它的意图。