使用 PhantomJS 渲染带有图像的 HTML答案

【问题标题】：Render HTML with images using PhantomJS使用 PhantomJS 渲染带有图像的 HTML
【发布时间】：2014-03-22 18:42:58
【问题描述】：

我正在尝试使用 PhantomJS（版本 1.9.7）从 HTML 文本创建 PDF。我编写了一个非常简单的脚本（由于错误回调等而变得更加复杂）

phantom.onError = function(msg, trace) {
    var msgStack = ['PHANTOM ERROR: ' + msg];
    if (trace && trace.length) {
        msgStack.push('TRACE:');
        trace.forEach(function(t) {
            msgStack.push(' -> ' + (t.file || t.sourceURL) + ': ' + t.line + (t.function ? ' (in function ' + t.function + ')' : ''));
        });
    }
    system.stdout.write(msgStack.join('\n'));
    phantom.exit(1);
};

var page = require('webpage').create();
page.viewportSize = { width: 800, height: 600 };
page.paperSize = { format: 'A4', orientation: 'portrait', margin: '1cm' };
page.onResourceRequested = function(requestData, networkRequest) {
    console.log('Request (#' + requestData.id + '): ' + JSON.stringify(requestData));
};
page.onResourceReceived = function(response) {
    console.log('Response (#' + response.id + ', stage "' + response.stage + '"): ' + JSON.stringify(response));
};
page.onResourceError = function(resourceError) {
    console.log('Unable to load resource (#' + resourceError.id + 'URL:' + resourceError.url + ')');
    console.log('Error code: ' + resourceError.errorCode + '. Description: ' + resourceError.errorString);
};
page.onError = function(msg, trace) {
    var msgStack = ['ERROR: ' + msg];
    if (trace && trace.length) {
        msgStack.push('TRACE:');
        trace.forEach(function(t) {
            msgStack.push(' -> ' + t.file + ': ' + t.line + (t.function ? ' (in function "' + t.function + '")' : ''));
        });
    }
    console.error(msgStack.join('\n'));
};

page.content = "<html><body><b>test</b><img src=\"http://www.google.co.uk/images/srpr/logo11w.png\" alt=\"\" border=\"0\" /></body></html>";
page.render('tmp.pdf');
setTimeout(function() {
    phantom.exit();
}, 5000);

我设置了页面，将简单的 HTML 字符串分配给内容属性并将其呈现为 PDF。

此脚本不会产生任何输出。

我已将问题缩小到<img> 元素，当删除该元素时，会按预期生成 PDF。从回调函数中可以看出请求了图片，收到了响应，没有报错。我已经尝试渲染到一个也没有输出的 PNG。

我已经探讨了这是代理问题的可能性，但是 raserize.js 示例可以正常工作。

【问题讨论】：

标签： phantomjs

【解决方案1】：

您必须在页面完全加载时调用渲染。请记住，通过page.open 或page.content 加载页面始终是异步的。

把你的代码改成这个

page.content = "<html><body><b>test</b><img src=\"http://www.google.co.uk/images/srpr/logo11w.png\" alt=\"\" border=\"0\" /></body></html>";
setTimeout(function() {
    page.render('tmp.pdf');
    phantom.exit();
}, 5000);

【讨论】：

当然！在页面加载所有资源之前调用渲染。我还发现了page.onLoadFinished 回调，它比使用setTimeout 更好。