31

我正在使用无头 Chrome 将 html 文档导出为 pdf

google-chrome --headless --disable-gpu --print-to-pdf='output_path' 'url'

如何更改生成的 pdf 中的纸张大小？

我可以控制 Chrome 参数和 html。

我总是收到美国信函。

没有为此记录的命令行选项。

我试过设置 CSS: @page {size: A4;}。在无头模式下无效，但在正常模式下按Ctrl+时有效P（选择纸张大小的选项Save as pdf消失，导出的 pdf 具有 A4 页面大小）。

我已经在 Ubuntu 16.04 上的 Chrome 版本 59、60 和 61 上尝试过这个。

4

5 回答 5

7

页面大小可以以英寸/毫米为单位设置。我还没有测试过像素大小。这是一组对我有用的 CSS 规则：

@page {
  margin: 0;
  padding: 0;
  size: 5in 6.5in;
}

我的确切情况是渲染 svg-to-pdf，而不是 html；对于 svg，您可能还需要在标签中添加width和height属性：<svg>

<svg width="5in" height="6.5in" ...>

就这样！输出 PDF 不会有边距，并且会保留所需的大小 - 在我的情况下为 5"x6.5"。

于 2019-07-02T01:40:24.743 回答
6

您可以从 Node环境运行 headless chrome 。

然后，您将能够将其他参数传递给printToPdf 函数，包括pageWidth和pageHeight。

于 2017-07-10T13:22:46.623 回答
4

页面大小显然现在可以“几乎”准确控制，而无需使用调试界面。

以下是使用无头 chrome 创建其内容的几乎精确尺寸的 PDF 的方法。

<head>
    <style>
      html, body {
        width:  fit-content;
        height: fit-content;
        margin:  0px;
        padding: 0px;
      }
     </style>

     <style id=page_style>
      @page { size: 100px 100px ; margin : 0px }
     </style>

</head>

这准备使 pdf 适合页面，但不正确，因为页面大小已设置为 100x100 的任意值。

呈现文档后，以下内容用于在页面底部正确设置页面大小：

<script>
window.onload(fixpage);

function fixpage() {

     renderBlock = document.getElementsByTagName("html")[0];
     renderBlockInfo = window.getComputedStyle(renderBlock)

     // fix chrome page bug
     fixHeight = parseInt(renderBlockInfo.height) + 1 + "px"   

     pageCss = `@page { size: \${renderBlockInfo.width} \${fixHeight} ; margin:0;}`
     document.getElementById("page_style").innerHTML = pageCss
}
</script>

这种方法消除了页眉/页脚，并处理了将像素转换为 pdf 的数字问题。

还有一件事

Chrome 目前在使用 CSS 时计算 div 的绝对高度存在错误

line-height: normal;

这会使页面计算太短，并导致生成额外的 pdf 页面。您可以使用以下方法解决此问题：

line-height: unset;

贯穿你的 CSS。没有它，您将无法获得准确的高度！

于 2018-09-01T12:32:29.547 回答
4

前段时间创建了一个补丁，可以启用页面大小配置https://codereview.chromium.org/2829973002/

它现在已关闭并在不稳定版本的 chrome 中可用，因此您可以按照您的建议使用它@page { size: A4 }。

我测试过，它适用于我安装的不稳定版本（Google Chrome 61.0.3141.7 dev）。不过，我不确定如何检查它何时在稳定版本中可用...

于 2017-07-12T13:25:23.047 回答
3

注意：在查看了 atomrc 答案中的评论后，我考虑将其添加为更清楚的答案。

除非使用 devtools 协议，否则您现在无法更改页面大小。

这是无头 Chrome 中的一个错误。在@page size无头模式下无法正确理解 CSS 规则，因为该用户在 chromium 错误跟踪器上对其进行了很好的描述：

桌面 Chrome 确实支持 @page at-rules 的大小和边距，并将根据 size 属性设置工作表尺寸。

Headless Chrome 似乎在某种程度上也解析了@page，但其行为与桌面版本不同：如果您指定@page {size}，headless 似乎会更改页面框的尺寸（本质上是打印区域），而不是纸张，它始终保持美国信函大小。但是，如果您指定 {size: Landscape}，它会旋转工作表。

于 2018-04-17T13:36:06.877 回答