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.这是由于这个问题.