PhantomJS PDF DPI 缩放问题

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，通过 100% 缩放的 PDF 查看器，这是 px 测量值（根据我的理解，windows 上的 PDF 以 96dpi 显示）。我能够让我的 HighCharts div 和 width:100% 通过采用这些 px 尺寸并乘以 viewPort 的 1.25、992 x 1400 值与 paperSize 设置为A4竖屏，无边距。不幸的是，这不会调整正在缩小的其余内容。

另一种选择是避免使用 A4 纸张大小并提供与视口相同的 px 值，这些值也针对匹配文档缩小了尺寸，尽管这是为预期 A4 PDF 的报告服务设计的...作为 none 的内容是基于光栅的，有什么方法可以将其放大到 fill/fit A4 PDF 尺寸吗？理想情况下，浏览器和 pdf 版本在同一台机器上看起来大小相似（PhantomJS 正在通过 Atom-Shell 应用程序使用），也许这不是可以提供给用户的一致体验？

Answer 1

有一个 Fork 解决了这个问题。您现在可以使用此叉子设置 dpi：https://github.com/martonw/phantomjs/tree/issue-%2313553

您需要为您的 OS 编译它，然后您可以使用 page.dpi

设置 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();
}

请确保在编译 phatomjs 时使用相同的 OS，因为编译过程会从系统读取 dpi 并将其用于 phantomjs。这意味着：如果你在 windows 上使用标准 dpi 96 编译它并在 centos 上使用它，你将拥有 96/72 的比例，因为 centos 使用 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 缩放问题

PhantomJS PDF DPI scaling issues

pdf

highcharts

pdf-generation

phantomjs

dpi