Cra*_*urt 20 css printing pdf google-chrome google-chrome-headless
我正在使用无头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上试过这个.
小智 6
您可以从 Node环境运行 headless chrome。
然后，您将能够将其他参数传递给printToPdf 函数，包括pageWidth和pageHeight。
以下是使用无头镶边创建尺寸几乎与内容完全相同的 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。没有它，您将无法获得准确的高度！
页面大小可以设置为英寸/毫米。我还没有测试过以像素为单位的大小。这是一组对我有用的 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"。