在AngularJS环境中使用PhantomJS截图

因为项目需要，要用pdf的方式导出一个页面。页面是一个WEB项目的一部分，项目前端用了angularJS框架，该页面中有一些元素是通过Charts等控件来实现的，目前没有找到很好的办法来通过java代码把页面中的控件元素按照浏览器中显示的效果生成pdf文件。

因为没有很好的办法用Java来实现对页面的渲染并生成和在浏览器端看到的效果相同的pdf,最后想到是否可以通过在前端生成pdf的方式来实现。在网上找了一下相关资料，发现有一个服务器端JS工具phantomJS可以在服务器端生成pdf文档。

phantomJS是采用webkit引擎的headless的浏览器实现，无须浏览器就可以渲染页面，能很好地支持CSS，JS，JSON，SVG，Canvas等，使用phantomJS进行截图只是它庞大功能中的一个小功能。

但是在实际使用的时候出现了意料之外的错误，可以正常对诸如百度，新浪之类的页面进行截图，但是在测试自己的项目的时候遇到如下问题：

D:\software\phantomjs\bin>phantomjs.exe ..\examples\rasterize.js http://localhos
t:8080/view/index.html#/app/audit-report dashboard.pdf
ERROR: Error: null is not an object (evaluating 'f.match(/version\/([\.\d]+)/i)[
1]')
    at P (http://localhost:8080/view/app/js/base.js:23:9861)
    at http://localhost:8080/view/app/js/base.js:23:10283
    at o (http://localhost:8080/view/app/js/base.js:4:817)
    at L (http://localhost:8080/view/app/js/base.js:23:10260)
    at M (http://localhost:8080/view/app/js/base.js:23:11717)
    at load (http://localhost:8080/view/app/js/base.js:23:14707)
    at http://localhost:8080/view/app/js/app.js:3368:34
    at u (http://localhost:8080/view/app/js/base.js:5:52123)
    at http://localhost:8080/view/app/js/base.js:5:52295
    at $eval (http://localhost:8080/view/app/js/base.js:6:1555)
    at $digest (http://localhost:8080/view/app/js/base.js:6:69)
    at $apply (http://localhost:8080/view/app/js/base.js:6:1829)
    at http://localhost:8080/view/app/js/base.js:4:12664
    at i (http://localhost:8080/view/app/js/base.js:4:51649)
    at s (http://localhost:8080/view/app/js/base.js:4:6491)
    at Q (http://localhost:8080/view/app/js/base.js:4:6770)
    at X (http://localhost:8080/view/app/js/base.js:4:6019)
    at http://localhost:8080/view/app/js/base.js:8:4360
    at c (http://localhost:8080/view/app/js/base.js:2:3470)
    at fireWith (http://localhost:8080/view/app/js/base.js:2:7575)
    at ready (http://localhost:8080/view/app/js/base.js:2:6084)
    at s (http://localhost:8080/view/app/js/base.js:1:1217)

	TRACE:
	-> http://localhost:8080/view/app/js/base.js: 5
	..\examples\rasterize.js:15 in onError

从网上找了不少资料，都不能很好地解决这个问题，从问题现象来看是某一个变量为空，根据app.js中的代码初步怀疑是异步获取JS的时候没有获取到，但是把所有的JS的依赖都去掉依然报相同的错误。最后静下心来跟踪代码的时候找到下面出错位置的代码：

	if(type == 'css') {
        if(!uaCssChecked) {
          var ua = navigator.userAgent.toLowerCase();
          // iOS < 6
          if(/iP(hone|od|ad)/.test(navigator.platform)) {
            var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
            var iOSVersion = parseFloat([parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)].join('.'));
            useCssLoadPatch = iOSVersion < 6;
          } else if(ua.indexOf("android") > -1) { // Android < 4.4
            var androidVersion = parseFloat(ua.slice(ua.indexOf("android") + 8));
            useCssLoadPatch = androidVersion < 4.4;
          } else if(ua.indexOf('safari') > -1 && ua.indexOf('chrome') == -1) {
            var safariVersion = parseFloat(ua.match(/version\/([\.\d]+)/i)[1]);
            useCssLoadPatch = safariVersion < 6;
          }
        }

因为该部分代码最终会被编译到base.js里面，没有办法跟踪调试，只能用下面的方式看一下错误原因：

• 加上console.log打印变量-->没有打印出来，不知道什么原因。

• 注释掉下面这两句：

    var safariVersion = parseFloat(ua.match(/version\/([\.\d]+)/i)[1]);
    useCssLoadPatch = safariVersion < 6;
  

  这时候上面的错误就没有了，可以正确地生成截图。

仔细观察一下出错的地方，发现是对浏览器版本进行判断，联系到phantomJS是一个headless的浏览器工具，可能没有浏览器标示和版本信息之类，查看帮助手册之后，在rasterize.js中加入了下面的代码，功能正常，可以进行正确截屏，也证明了前面的错误确实是因为没有携带user-agent信息。

page.settings.userAgent = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.80 Safari/537.36';

成功的截图如下：