CSS 如何在无头Chrome中更改纸张大小 –print-to-pdf

在本文中，我们将介绍如何使用CSS在无头Chrome中更改纸张大小，以及如何通过 --print-to-pdf 参数将网页转换为PDF文件。

阅读更多：CSS 教程

CSS @page 规则

CSS的 @page 规则用于定义打印文档时的页面样式。通过设置 size 属性，我们可以更改打印文档的纸张大小。@page 规则可以应用于整个文档或局部页面。

示例代码如下：

@page {
  size: A4 landscape; /* 将纸张大小设置为A4横向 */
}

body {
  margin: 0;
  padding: 0;
}

在上面的示例中，我们将纸张大小设置为A4横向。如果需要使用其他纸张大小，在 size 属性中使用对应的名称即可。

使用 –print-to-pdf 参数转换网页为PDF

无头Chrome提供了 --print-to-pdf 参数，可以将网页快速转换为PDF文件。我们可以通过命令行或编程语言的运行时选项来使用此功能。

以下是使用命令行参数的示例：

chrome --headless --disable-gpu --print-to-pdf=file.pdf https://example.com

在上面的示例中，我们使用无头Chrome访问 https://example.com 网页，并将其转换为名为 file.pdf 的PDF文件。

示例：将纸张大小设置为A3

让我们通过一个具体的示例来演示如何将纸张大小设置为A3。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Change Paper Size to A3</title>
  <style>
    @page {
      size: A3; /* 设置纸张大小为A3 */
    }

    body {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <h1>这是一份A3纸</h1>
  <p>在这份纸上，你可以书写更多内容。</p>
</body>
</html>

在上面的示例中，我们将纸张大小设置为A3。你可以按照需要更改页面的内容和样式。可以在Chrome中打开该HTML文件，并使用 --print-to-pdf 参数将其转换为PDF文件。