Question

我的最终目标是打开嵌入了javascript的本地html文件，创建一个包含多边形的地图，并使用PhantomJS截取它。我写了一个简单的JS文件来执行此操作：

var page = require('webpage').create();
page.open('https://www.google.com/maps', function(status) {
  console.log('State: ' + status);
  if(status === 'success') {
      page.render('example.pdf', {format: 'pdf', quality: '100'});
  }
  phantom.exit();
});

这将返回错误：

ReferenceError: Can't find variable: google

我已经在本地html文件和使用谷歌地图的其他网站上尝试过此操作，但我仍然遇到同样的错误。我成功地拍摄了没有谷歌地图的其他网站的截图。在互联网上搜索，似乎人们没有这样的问题，并且已经成功地使用谷歌地图截取网页截图...所以我想知道可能出现什么问题。

另一个注意事项：我在我的rails项目中安装了PhantomJS作为gem，并使用此gem通过rails控制台运行javascript文件。我已经尝试使用PhantomJS的标准安装（v 2.0.0），它仍然无法正常工作。

Answer 1

您将不得不等待DOM中的元素。例如在maps.google.com上，您可以等待在加载所有图块之后加载的水印。

var page = require('webpage').create();
page.open('https://www.google.com/maps', function (status) {
    console.log('State: ' + status);
    if (status === 'success') {
        waitFor(function () {
            return page.evaluate(function () {
                var document_contains_watermark =
                    document.body.contains(document.getElementById('watermark'));
                return document_contains_watermark;
            });
        }, function () {
            page.render('maps-google-com.pdf', {format: 'pdf', quality: '100'});
            phantom.exit();
        });
    }
});

function waitFor(testFn, onReady) {
    var loaded = false;
    var interval = setInterval(function () {
        loaded = testFn();
        if (loaded) {
            onReady();
            clearInterval(interval);
        }
    }, 1000);
}

如果要在开发的页面上截取屏幕截图，请使用上述相同的逻辑，但要在google maps idle事件上自己添加一个元素。

google.maps.event.addListenerOnce(map, 'idle', function () {
    var loadedElem = document.createElement('div');
    loadedElem.setAttribute("id", "idLoadedElem");
    document.body.appendChild(loadedElem);
});

Answer 2

你应该给puppeter一个去，这很简单：

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.pdf'});

  await browser.close();
})();

PhantomJS无法加载Google地图

2 个答案: