使用PhantomJS生成单页.pdf

Question

我正在使用PhantomJS将可变高度的网页导出为pdf.由于pdfs可以有任何页面大小(更像是比率,因为它是矢量),我想以一种在pdf中创建单个页面的方式导出它,以适应整个网页.

幸运的是,使用evaluatePhantomJS方法,我可以轻松检测页面高度

page.includeJs('jquery.js', function() {
  var pageHeight = page.evaluate(function() {
    return $('#content').height();
  });
});

但是,我不确定如何使用它对我有利.viewportSize似乎没有以任何方式影响这个,因为我不是渲染视口而是整个文档.我把它设置为固定的{width: 800, height: 800}

所以我不能把头围绕在paperSize尺寸上.将高度设置为返回的pageHeight将呈现1.5x页面,所以我尝试调整宽度,但它并没有真正加起来我能理解的任何公式.

如何实现这一点的任何想法,或者你有更多的洞察paperSize属性和从页面呈现的像素大小的边界之间的相关性

Answer 1

viewportSize 模拟传统浏览器中窗口的大小。由于 HTML 布局，它会影响页面的渲染，但不会直接影响 pdf 渲染。

使用page.papersize定义渲染为 PDF 时网页的大小。使用一点 Jquery，可以轻松在单个文档中呈现网页，如下所示：

var page = require('webpage').create(),
    system = require('system'),
    address, output;

if (system.args.length != 3) {
    console.log('Usage: spdf.js URL filename');
    phantom.exit(1);
} else {
    address = system.args[1];
    output = system.args[2];
    page.viewportSize = { width: 600, height: 600 };

    page.open(address, function (status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
            phantom.exit();
        } else {
            var size = page.evaluate(function () {
                return {width: width = $(document).width(), height : $(document).height() };
            });

            page.paperSize = size;

            page.render(output);
            phantom.exit();
        }
    });
}