phantomjs使内容适合A4页面

问题描述 投票:14回答:1

我想将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找到了。

javascript html css pdf phantomjs
1个回答
6
投票

一种解决方案是创建一个与A4大小完全相同的元素,然后将内容放入其中。这在我的机器上有效:

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

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

© www.soinside.com 2019 - 2024. All rights reserved.