使用PhantomJS生成单页PDF

Question

我正在使用PhantomJS将一个高度可变的网页导出为PDF格式。由于PDF文件可以拥有任何页面大小（更像是比例，因为它是矢量图），我希望以一种方式导出它，使得整个网页适合PDF文件的单个页面中。

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

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

然而，我不确定如何将其用于我的优势。 viewportSize 似乎没有任何影响，因为我渲染的不是视口而是整个文档。 我将其设置为固定的 {width：800，height：800}

所以我无法理解 paperSize 大小。 将高度设置为返回的pageHeight将呈现1.5倍的页面，因此我尝试调整宽度，但它不会真正添加到我可以理解的任何公式中。

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

- treznik

---

不是问题的重点，但感谢演示includeJS方法以展示如何将jQuery引入phantom js脚本！ - chiliNUT

Answer 1

在 Cybermaxs 的回答上进行扩展，我添加了以下内容：

• 设置固定宽度（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);
        }
    });
}

- Max

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

- Cybermaxs

---

谢谢您的评论，我尝试了这个方法，但是我的 PDF 文件最终会有两页，其中一页和半页被我的页面使用。即使宽度似乎也比 viewportSize.width 小。它的行为就像被某种程度的缩放一样，但我确保将 zoomFactor 设置为 1。您有任何想法为什么会发生这种情况或如何调试发生了什么？ - treznik

我也遇到了同样的问题。如果能得到帮助将不胜感激。 - Guillermo Maschwitz