phantomjs 使内容适合 A4 页面

Posted 2023-02-24

【中文标题】phantomjs 使内容适合 A4 页面

【英文标题】：phantomjs fit content to A4 page

【发布时间】：2014-08-22 21:59:29

【问题描述】：

我想将 html 页面转换为 A4 大小的 PDF。

page.paperSize = 
  format: 'A4',
  orientation: 'portrait',
  border: '1cm'
;

有没有办法缩放网站以适应 A4 的宽度？

如果我有以下 HTML：

<div style="width:1500px; text-align:right;">
  right 1500px
</div>

div 的右端脱离页面。

我玩过viewportSize 属性：

page.viewportSize = 
  width: 480,
  height: 800
;

我原以为更大的视口宽度会导致页面的更大部分呈现为 PDF。

page.zoom

也没有达到预期的效果。

PDF 文件是报告。为了专业的外观，它们应该是 A4，而不是任意大小。

或者 phantomjs 是不是我的问题的错误工具？

我在 Ubuntu 12.04.4 上使用 phantomjs 版本 1.9.7。

---

编辑：

这里好像有三个不同的维度：

vieportSize 这是用于渲染的大小，如文档中所述 paperSize 是生成的 PDF 文档的大小 然后是屏幕尺寸。 phantomjs 总是适合纸张大小的一个屏幕的宽度。我的 phantomjs 版本的屏幕尺寸是 1024 x 768 像素。如果视口大于屏幕尺寸，则不会显示 1024 像素之外的所有内容。

我还没有找到改变屏幕大小的方法。

我通过将http://www.whatismyscreenresolution.com/ 渲染为 PDF 发现了这一点。

【问题讨论】：

您可以操纵元素/页面的宽度，使其适合文档。问题是这是否仍然看起来不错。顺便说一句，您使用哪个 phantomjs 版本和哪个操作系统？

而且我宁愿不必围绕 phantomjs 的要求来设计我的网站...

这里是另一个指针：你可以simulate a page zoom，但这可能会严重破坏你的页面。

【参考方案1】：

一种解决方案是创建一个与 A4 尺寸完全相同的元素，并将您的内容放入其中。这适用于我的机器：

.page
    position:relative;
    border: 0px;
    width:calc(210mm * 1.25);
    height:calc(297mm * 1.25);
    padding:0

请注意，我使用的缩放系数为 1.25。这是由于this issue。

【讨论】：

这似乎运作良好。我使用“评估”功能动态地完成它，它工作正常，例如document.querySelector('body').style.height = "calc(297mm * 1.25)"

我用过 (210 * 1.3)，效果很完美，和 firefox 一样，使用缩放 130%