Question

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

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

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

扩展Cybermaxs＆＃39;回答，我补充说。

设置固定宽度（36厘米与我的视口相对应）和
高度计算的单位
将边距设置为0px。

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

完整的脚本：

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呈现。

使用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();
        }
    });
}

使用PhantomJS生成单页.pdf

2 个答案: