Question

我正在尝试通过PhantomJS将html文件转换为PDF，并且无法弄清楚如何避免dpi缩放问题。只有像<div style=" display:block; background-color:red; width:96px; "> text </div>这样简单的元素它的宽度减少到77px。我的viewPort或paperSize的值似乎没有改变这一点。我可以将其他地方建议的zoomFactor调整为 1.25 ，这会大致缩放到预期的宽度，但会混淆页面中的某些元素。

我有一个由HighCharts生成的svg图表设置为填充100％宽度，我也尝试width: 210mm但是这将缩小而不是匹配paperSize宽度210mm。我知道96dpi的A4应该是794px x 1120px，并且通过PDF查看器以100％变焦这是px测量（根据我的理解，窗口上的PDF显示为96dpi）。我能够通过width:100%获取我的HighCharts div以通过获取这些px维度并将viewPort乘以paperSize的1.25,992 x 1400值来匹配PDF宽度。设置为A4纵向，没有边距。不幸的是，这并没有调整缩小的其他内容。

另一个选择是避免A4纸张大小并提供与viewPort相同的px值，这些也是针对匹配文档的缩小尺寸，尽管这是用于报告A4 PDF的报告服务...没有内容是基于栅格的有没有办法可以升级它来填充/适合A4 PDF尺寸？理想情况下，浏览器和pdf版本在同一台机器上看起来大小相似（PhantomJS正在通过Atom-Shell应用程序使用），这可能不是一种可以提供给用户的一致体验吗？

Answer 1

There is a Fork with a fix for that. You can set the dpi now with this fork: https://github.com/martonw/phantomjs/tree/issue-%2313553

You need to compile it for your OS and then you can set the dpi with page.dpi

console.log('Loading a web page');
var page = require('webpage').create();
var url = 'http://phantomjs.org/';
   page.open(url, function (status) {
   //Page is loaded!
   page.dpi=300; // this is where you actually set the DPI
   page.render("test.pdf");
   phantom.exit();
}

Be sure you use the same OS for phatomjs on where you compile it, because the compile process reads the dpi from the system and uses it for phantomjs. This means: If you compile it on windows with standard dpi 96 and use it on centos you will have a scale of 96/72 because centos uses 72 dpi

Answer 2

是的，>2.0 的 A4 定义不明确。我通过在 .render 命令之前调整 rasterize.js 中的 css 样式来缩放我的 html。

page.evaluate(function () {
    var the_page = document.getElementsByTagName("page")[0];
    the_page.style.transformOrigin='0 0';
    the_page.style.WebkitTransformOrigin='0 0';
    the_page.style.transform='scale(1.28)';
    the_page.style.webkitTransform ='scale(1.28)';
);

PhantomJS PDF DPI扩展问题

2 个答案: