phantomjs - phantomjs中奇怪的页面宽度

Question

这是脚本代码:

var page = require('webpage').create();

page.paperSize = {
  format: 'A4', 
  orientation: "landscape"
};

page.open('http://www.google.com', function () {

  var arr = page.evaluate(function () {
     var pageWidth = document.body.clientWidth;
     var pageHeight = document.body.clientHeight;

     return [pageWidth, pageHeight];
  });

  console.log('pagwWidth: ' + arr[0] + '; pageHeight: ' + arr[1]);

  page.render('google.pdf');
  phantom.exit();    
});

我正在尝试获取 document.body 页面的 clientWidth 和 clientHeight。当我执行此脚本时，我得到以下值:

pagwWidth: 400; pageHeight: 484

为什么上面的宽度是400px？我想我应该更宽。

感谢您的答复。但后来我不明白下面的事情。当我使用 viewportSize = {width: 1024, height: 800}

var page = require('webpage').create();

page.paperSize = {
  format: 'A4', 
  orientation: "landscape"
};

page.viewportSize = {width: 1024, height: 800};
page.open('http://www.google.com', function () {

  page.render('google.pdf');
  phantom.exit();    
});

我得到以下文件:


但是如果我使用 viewportSize = {width: 400, height: 400}

var page = require('webpage').create();

page.paperSize = {
  format: 'A4', 
  orientation: "landscape"
};

page.viewportSize = {width: 400, height: 400};
page.open('http://www.google.com', function () {

  page.render('google.pdf');
  phantom.exit();    
});

我也一样:


所以我不明白 viewportSize 对 View 有何影响？

Answer 1

文档受视口(viewport)大小而不是纸张大小的影响。沿着这条线思考，网页在您的网络浏览器中的外观与您当前的打印机设置无关。

使用viewportSize如果你想影响页面布局:

page.viewportSize = { width: 1024, height: 800 };