7

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

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

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

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

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

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

4

2 回答 2

3

扩展 Cyber​​maxs 的答案，我补充说

  • 设置一个固定宽度（36cm 与我的视口很好地对应）和
  • 一个单位到高度计算
  • 将边距设置为 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);
        }
    });
}
于 2014-03-25T17:25:53.960 回答
1

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();
        }
    });
}
于 2013-08-26T07:23:34.467 回答