Chrome无头浏览器打印为PDF时的附加选项

Question

我需要再次求助。我正在尝试使用Chrome的headless功能将页面打印为PDF，但是PDF中出现了页眉和页脚。我发现这个选项已经在Devtools中实现。

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

然而，我找不到如何在CLI中使用这些选项。同时，是否可能从Selenium调用Devtools？

另外，如何在Devtools中调用Page.PrintToPDF？我尝试在控制台中运行命令，但显示Page未定义。

- user2580925

---

首先，你是否在命令行中使用这两个标志？--headless \ # 在无头模式下运行Chrome。--disable-gpu \ # 目前临时需要。 - nuccio

今天，我遇到了一个类似的问题，并发现目前唯一的解决方案似乎是利用chrome-debugging-protocol。对于另一个问题，我写了一个关于如何从CLI执行此操作的答案：https://dev59.com/dlcP5IYBdhLWcg3wVYeh#51431779 - JepZ

Answer 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/

- nuccio

---

你把 --print-to-pdf 和 --print-topdf 搞混了。 - Limon Monte

这种方法无法正确解决多页PDF的问题 - 它会移除除最后一页以外的所有页面的底部边距，以及除第一页以外的所有页面的顶部边距。我想除非使用DevTools API，否则没有办法在不破坏多页边距的情况下解决这个问题。 - codermonkeyfuel

codermonkeyfuel，这对我来说已经可以创建多页PDF，而且在Chrome Headless Windows和Linux Library上没有任何页面的原始边距。创建一个新问题或在下面发布更多信息。我将帮助您解决此问题。 - nuccio

请问您能否澄清如何使用CLI添加CSS文件？如果我想保存的URL是一个网页而不是本地HTML文件，我不明白该怎么做。 - spacegoing

过去，我曾经使用Phantomjs修改现有页面并将其转换为PDF，但我从未使用Chrome Headless来完成相同的操作。我相信您可以使用puppeteer注入我上面列出的CSS：https://github.com/GoogleChrome/puppeteer - nuccio

Answer 2

"/path/to/google-chrome"：这是 Google Chrome 的路径。

'--headless'：在无浏览器 UI 的 headless 环境下运行 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页面的格式。

- Ayaz Ur Rashid

---

我认为你不需要媒体查询，因为@page仅用于打印。此外，请参考https://developer.mozilla.org/en-US/docs/Web/CSS/@page您只能更改文档的边距、孤行、孤页和分页。尝试更改任何其他CSS属性将被忽略。 - Ayaz Ur Rashid

Answer 3

如果你需要使用 Chrome（或 Edge）将页面打印成 PDF，且不包含页眉和页脚，则有一个附加的命令行选项：--no-pdf-header-footer。 另一个选项--print-to-pdf-no-header仍然可用，但现已弃用。

有关所有命令行选项的全面列表，请参见https://peter.sh/experiments/chromium-command-line-switches/。

- predrags

---

这会仅删除页眉还是连页脚一起删除？ - TheRealChx101

根据我的了解，此选项将同时删除页眉和页脚。 - predrags

--print-to-pdf-no-header已被弃用。请改用**--no-pdf-header-footer**。示例命令：google-chrome --headless --print-to-pdf=file1.pdf --no-pdf-header-footer https://example.com - Zamicol

Answer 4

CLI开关确实有文档记录。首先，对于原始/经典的Chrome Headless，它们在https://developer.chrome.com/blog/headless-chrome/#command-line-features上。
对于“新”引擎（自2021年起，通过--headless=new访问），其开关位于https://developer.chrome.com/articles/new-headless/#headless-specific-command-line-flags。

- charlie arehart

Answer 5

--no-pdf-header-footer 标志背后的功能以前可以通过 --print-to-pdf-no-header 标志使用。根据您使用的 Chrome 版本，您可能需要回退到旧的标志名称。

对于新的无头 Chrome 更新（2023 年 2 月）之后的更新版本。

- Aman Ahlawat

Answer 6

如果您想将网页下载为PDF文件，则需要添加此媒体查询。 参考资料 媒体打印CSS https://developer.mozilla.org/en-US/docs/Web/CSS/@media

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

- Ayaz Ur Rashid

---

这更像是对另一个答案/评论的评论，而不是新的答案。 - Eric Aya

另外，您已经在2018年发布了一个答案！https://dev59.com/dVYO5IYBdhLWcg3wRvgh#53552720 - Eric Aya