使用PhantomJS使用图像渲染HTML

时间:2014-02-21 10:10:22

标签: phantomjs

我正在尝试使用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字符串分配给content属性并将其呈现为PDF。

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

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

我已经探讨了这是代理问题的可能性,但是raserize.js示例没有任何问题。

1 个答案:

答案 0 :(得分:8)

您必须在页面完全加载时调用渲染。请注意,通过page.openpage.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);