Chrome 无头打印到 PDF 中的其他选项

Posted 2023-02-19

【中文标题】Chrome 无头打印到 PDF 中的其他选项

【英文标题】：additional options in Chrome headless print-to-pdf

【发布时间】：2018-02-15 01:45:07

【问题描述】：

我再需要一次帮助。我正在尝试使用 chrome 的无头功能将页面打印为 pdf。但是，pdf 中存在页眉和页脚。我发现这个选项已经在 Devtools 中实现了。

https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-printToPDF

但是，我找不到如何在 CLI 中使用这些选项。也可以从 selenium 调用 Devtools 吗？

此外，我如何在开发工具中调用 Page.PrintToPDF。我试图在控制台中运行该命令。它显示页面未定义。

【问题讨论】：

首先，您是否在命令行中使用这两个标志？ --headless \ # 以无头模式运行 Chrome。 --disable-gpu \ #暂时需要。

今天遇到了类似的问题，发现目前唯一的解决办法似乎是使用chrome-debugging-protocol。对于另一个问题，我从 CLI 写了一个关于如何做到这一点的答案：***.com/a/51431779/1149404

【参考方案1】：

将此 CSS 添加到您创建的 PDF 页面中，以删除 Chrome Headless 实现的页眉和页脚。

CSS：

@media print 
  @page  margin: 0; 
  body  margin: 1.6cm; 

你应该像下面这样格式化你的命令来创建 PDF：

"C:\PATH\TO\CHROME\EXECUTABLE\FILE", "--headless","--disable-gpu","--print-to-pdf=" + directory path to where you want the file to go followed by the desired file name/fileName.pdf,"--no-margins", "the path to the file you want turned into a pdf"

示例 1：

C:\chrome-win/chrome --headless --disable-gpu --print-to-pdf=C:\user\fileName.pdf --no-margins C:\Projects\index.html

示例 2：

您还可以通过在命令行中导航到包含 Chrome 可执行文件的文件夹并运行以下命令来测试此功能：

chrome --headless --disable-gpu --print-to-pdf https://www.chromestatus.com/

【讨论】：

你在搞砸--print-to-pdf和--print-topdf

这不能正确解决多页 PDF 的问题 - 它会删除除最后一页以外的所有页面的底部边距，以及除第一页以外的所有页面的顶部边距。我想除非你使用 DevTools API，否则没有办法在不破坏多页边距的情况下做到这一点......

codermonkeyfuel，这对我来说可以使用 Chrome 无头 Windows 和 Linux 库在任何页面上创建没有原始页边距的多页 PDF。创建一个新问题或在下面发布更多信息。我会帮你解决这个问题。

能否请您说明如何使用 CLI 添加 css 文件？如果我要保存的 url 是网页而不是本地 html 文件，我不明白该怎么做

过去，我使用 Phantomjs 修改现有页面，然后再将它们转换为 PDF，但我从未使用 Chrome Headless 来做同样的事情。我相信你可以用 puppeteer 注入我上面列出的 CSS：github.com/GoogleChrome/puppeteer

【参考方案2】：

"/path/to/google-chrome" : 这是谷歌浏览器的路径。

'--headless' : 在没有完整浏览器 UI 的无头环境中的 Chrome 浏览器

'--run-all-compositor-stages-before-draw' : 防止在所有数据呈现之前创建 Pdf（在呈现所有数据之后将创建 pdf）。

'--virtual-time-budget = x: 它延迟了PDF的创建过程，这里x是毫秒。

'--print-to-pdf' ：此标志创建给定 URL 的 pdf。

URL：网页的url。

PDF 页面格式（使用 CSS） 添加这个（到css文件）：

 @media print 
            @page  margin: 0mm 0mm 0mm 0mm;
            size:8in 9.5in;
            
            

以上 CSS 代码对网页渲染没有影响，但仅对 PDF 中的页面格式有影响。

【讨论】：

我认为您不需要媒体查询，因为@page 仅用于打印。另外，根据developer.mozilla.org/en-US/docs/Web/CSS/@page 只能更改文档的边距、孤儿、寡妇和分页符。更改任何其他 CSS 属性的尝试将被忽略。

【参考方案3】：

是的，如果您想以 pdf 格式下载网页，则需要添加此媒体查询。 参考 媒体打印 CSS https://developer.mozilla.org/en-US/docs/Web/CSS/@media

页面 CSS https://developer.mozilla.org/en-US/docs/Web/CSS/@page

【讨论】：

这看起来更像是对另一个答案/评论的评论，而不是新的答案。

此外，您已经在 2018 年发布了答案！ ***.com/a/53552720/2227743