pdf - PhantomJS PDF DPI 缩放问题

Question

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

我有一个由 HighCharts 生成的 svg 图表，它设置为填充 100% 宽度，我也尝试过 width: 210mm但这将按比例缩小，而不是匹配 210mm 的 paperSize 宽度。我知道 96dpi 的 A4 尺寸应为 794px x 1120px，通过 PDF 查看器在 100% 缩放时，这就是 px 测量值(根据我的理解，Windows 上的 PDF 以 96dpi 显示)。我能够通过 width:100% 获得我的 HighCharts div通过获取这些 px 尺寸并乘以 1.25，即 viewPort 的 992 x 1400 值，按预期渲染匹配 PDF 宽度。与 paperSize设置为 A4 纵向且无边距。不幸的是，这并没有调整正在缩小的其余内容。

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

Answer 1

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

您需要为您的操作系统编译它，然后您可以使用 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 时使用相同的操作系统，因为编译过程会从系统读取 dpi 并将其用于 phantomjs。这意味着:如果您在 Windows 上使用标准 dpi 96 编译它并在 centos 上使用它，您将得到 96/72 的比例，因为 centos 使用 72 dpi