PhantomJS如何将内容适配A4纸张大小

Question

15

我希望将一个HTML页面转换为A4大小的PDF。

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

有没有一种方法可以将网站缩放以适应A4纸张的宽度？

如果我有以下HTML代码：

<div style="width:1500px; text-align:right;">
  right 1500px
</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来发现这一点。

- pat

你可以调整元素/页面的宽度，使其适应文档。问题是这样做是否仍然看起来好看。顺便问一下，你使用的是哪个phantomjs版本和哪个操作系统？ - Artjom B.

1

我宁愿不需要根据phantomjs的要求来设计我的网站... - pat

这里有另一个指针：你可以模拟页面缩放，但这可能会严重破坏你的页面。 - Artjom B.

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jencel · Accepted Answer

一种解决方案是创建一个与A4纸张大小完全相同的元素，并将您的内容放入其中。这在我的设备上可行：

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

请注意，我使用的缩放因子为1.25。这是由于此问题引起的。