phantomjs 使内容适合 A4 页面

Question

我想将 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 发现了这一点。

Answer 1

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

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

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