css - Chrome 不支持 css @page？

我有这么简单的打印 css:

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

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

编辑:@page 不支持 ref

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

最佳答案

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

此工具是一个 polyfill，可将您发布的 block (浏览器未实现的 CSS 分页媒体)转换为浏览器兼容的 html/css。

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

关于css - Chrome 不支持 css @page？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20946723/