使用 PhantomJS 生成单页 .pdf

Question

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

幸运的是，使用evaluate PhantomJS 方法我可以轻松检测页面高度

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

但是，我不确定如何利用它来发挥自己的优势。 viewportSize 似乎不会以任何方式影响这一点，因为我不是在渲染视口而是渲染整个文档。我将其设置为固定的{width: 800, height: 800}

所以我无法理解paperSize 的大小。将高度设置为返回的 pageHeight 将呈现 1.5 倍的页面，所以我尝试调整宽度，但它并没有真正加起来我能理解的任何公式。

关于如何实现这一点的任何想法，或者您对paperSize 属性与从页面呈现的像素大小的边界之间的相关性有更多见解

Answer 1

扩展 Cyber​​maxs 的答案，我添加了

• 设置固定宽度（36cm 与我的视口很好对应）和
• 一个单位来计算高度
• 将边距设置为 0 像素。

我无法给出很好的解释，但它对我有用。

完整的脚本：

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

if (system.args.length < 3 || system.args.length > 5) {
    console.log('Usage: screenshot.js <URL> <filename>');
    phantom.exit(1);
} else {
    address = system.args[1];
    output = system.args[2];
    page.viewportSize = { width: 1280, height: 900};
    page.open(address, function (status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
            phantom.exit();
        } else {
            window.setTimeout(function () {
                page.includeJs("//code.jquery.com/jquery-1.10.1.min.js", function() {
                    var size = page.evaluate(function () {
                        return {width: width = "36cm", height : $(document).height()*2+400 + "px", margin: '0px' };
                    });
                    page.paperSize = size;          
                    page.render(output);
                    phantom.exit();
                });
            }, 400);
        }
    });
}

Answer 2

viewportSize 模拟传统浏览器中的窗口大小。因为html布局影响页面的渲染，但不直接pdf渲染。

当呈现为 PDF 时，使用 page.papersize 定义网页的大小。使用一点 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();
        }
    });
}