Question

我想生成一个要添加到电子邮件的图表。我正在考虑使用PhantomJS来做到这一点。我使用的是PhantomJS 2.0版。我想加载d3.js（在cloudfare上）和c3.js（在本地js文件中）。我在这里遗漏了一些东西。当我使用PhantomJS运行脚本时，它会在窗口对象上返回未定义的d3。

我的代码不起作用：

var page = require('webpage').create();
var fs = require('fs');
page.viewportSize = { width: 400, height : 400 };
page.content = '<html><body><canvas id="surface"></canvas> <button>Hello world</button> </body></html>';
page.includeJs("https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js");
var c3_js = "./c3.min.js";
page.includeJs(c3_js);

page.onLoadFinished = function(status) {
  var c3 = page.evaluate(function() {
          return window;
  });

  console.log(c3.d3);

  page.render('test.png');
  phantom.exit();
};

Answer 1

您的代码存在很多问题：

page.includeJs(url, callback)是一个异步函数，因此您需要将需要包含的JavaScript的代码放入回调中（根本不需要）。
您需要将page.injectJs(filename)用于本地文件（c3.js）。
您无法从页面上下文返回window，因为它不是可以序列化的原始对象。来自docs：

注意： evaluate函数的参数和返回值必须是一个简单的原始对象。经验法则：如果它可以通过JSON序列化，那就没关系了。

闭包，函数，DOM节点等将不工作！

您可以在页面上下文中执行所有操作（在page.evaluate()内），也可以将一些表示返回到外部。如果您决定在页面上下文中执行此操作，那么您应该查看各种事件侦听器，例如page.onConsoleMessage，以查看来自页面上下文和page.onCallback的控制台消息。

使用PhantomJS渲染图形并拍摄快照

1 个答案: