Phantomjs 无法正确捕获网页的屏幕截图

Question

我正在测试 phantomjs 在本地端从网页创建屏幕截图。

这就是 HTML 在本地主机中的呈现方式 - Output

但是在从代码创建 pdf 时，PDF 中的宽度设置不正确，即某些文本被剪切，如下所示。

下面是我累的代码-

var url = 'http://localhost:5656';
page.open(url);

page.onLoadFinished = function() {
    var pdfName = 'screen';
    page.render(pdfName + ".pdf");
    var height = page.evaluate(function() { return document.body.offsetHeight }),
        width = page.evaluate(function() { return document.body.offsetWidth });
    console.log(height,width);  
};

我也尝试了这两个属性，但得到了相同的结果 -

page.clipRect = { top: 0, left: 0, right: 0, width: 1286};
page.viewportSize = { width: 1024, height: 768};

让我知道我做错了什么。

我得到的输出 - pdf image I am getting

Answer 1

我自己解决了这个问题。以下是工作代码 -

var url = 'http://localhost:5656';
page.open(url);

page.onLoadFinished = function() {
    //page.viewportSize = { width: 1400, height: 1200 };
    page.paperSize = {format: 'A4'};
    var pdfName = 'screen';
    page.render(pdfName + ".pdf");
    var height = page.evaluate(function() { return document.body.offsetHeight }),
        width = page.evaluate(function() { return document.body.offsetWidth });
    console.log(height,width);  
};

如您所见，下面是为我施展魔法的那一行 -

page.paperSize = {format: 'A4'};

希望对以后的访客有所帮助。

Phantomjs 无法正确捕获网页的屏幕截图

Phanomjs not properly capturing screenshot of a web page

javascript

pdf

node.js

webpage-rendering

phantomjs