Question

我正在使用无头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上试过这个。

Answer 1

您可以run headless chrome from Node环境。

然后，您就可以将其他参数传递给printToPdf function，包括pageWidth和pageHeight。

Answer 2

注意：在完成atomrc的回答中的评论之后，我考虑将其添加为更清晰的答案。

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

这是a bug in headless Chrome。在无头模式as this user describes it well on the chromium bug tracker中无法正确理解@page size CSS规则：

桌面版Chrome确实支持@page at-rules的尺寸和边距，并会根据尺寸属性设置图纸尺寸。

似乎Headless Chrome在某种程度上解析了@page，但行为与桌面版本不同：如果指定@page {size}，则headless似乎会更改页面框的尺寸（基本上是打印版本）区域），而不是始终保持US Letter大小的表格。但是，如果指定{size：landscape}，它会旋转工作表。

Answer 3

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

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

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

Answer 4

页面大小可以以英寸/毫米为单位设置。我尚未测试像素大小。这是一组CSS规则，可以帮我解决问题：

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

我的确切情况是将svg转换为pdf，而不是html；对于svg，您可能还需要向width标签添加height和<svg>属性：

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

仅此而已！输出PDF将没有边距，并且将保留所需的大小-在我的情况下为5“ x6.5”。

Answer 5

现在显然可以在不使用调试界面的情况下“几乎”精确控制页面大小。

以下是使用无头镀铬创建几乎具有其内容确切尺寸的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的数值问题。

还有一件事

当您使用CSS时，Chrome当前存在一个计算div绝对高度的错误

line-height: normal;

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

line-height: unset;

遍历CSS。没有它，您将无法获得准确的高度！

如何在无头Chrome中更改纸张尺寸 - print-to-pdf

5 个答案:

现在显然可以在不使用调试界面的情况下“几乎”精确控制页面大小。