后台生成Echarts报表的解决方案-白红宇

后台生成Echarts报表的解决方案

阅读量：6003 次

发布时间：2019-06-20

本文共 2636 字，大约阅读时间需要 8 分钟。

在项目中使用Echarts来生成报表，效果不错，之后有个需求要设置定时时间给指定的邮箱发送报表邮件。后台使用JFreeChart生成的话样式不协调，而Echarts需要浏览器内核来执行js，后来尝试过htmlunit，对echarts支持的不是很好，遂放弃了。后来搜索中在一篇博客看到PhantomJs的介绍可以实现上述需求。

PhantomJs是一个无头浏览器，对前端页面支持不错，对于一些需要爬取异步加载的页面很有用。

安装方法网上很多，

#进入/opt目录

cd /opt

#下载phantomjs

wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2

#解压软件压缩包

tar xvf phantomjs-2.1.1-linux-x86_64.tar.bz2

# 编辑配置文件.

vim /etc/profile

# 将PhantomJS的bin目录加入到PATH环境变量中.

export PATH=${PATH}:/opt/phantomjs-2.1.1-linux-x86_64/bin

# 退出vi编辑器，使用source命令让刚才的配置即时生效.

source /etc/profile

# 测试PhantomJS是否安装成功，如果打出了版本信息，即安装成功.

phantomjs -v

#请phantom.js放到/opt目录下

安装完成需要编辑phantomjs脚本，可参考以下脚本：

var system = require('system');

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

// 如果是windows,设置编码为gbk，防止中文乱码,Linux本身是UTF-8

var osName = system.os.name;
if ('windows' === osName.toLowerCase()) {
phantom.outputEncoding="gbk";
}

// 获取第二个参数(即请求地址url).

var url = system.args[1];

// 显示控制台日志.

page.onConsoleMessage = function(msg) {
console.log('[' + msg + ']');
};

//打开给定url的页面.

page.open(url, function(status) {
if (status == 'success') {

//console.log('echarts页面加载完成,加载耗时:' + (new Date().getTime() - start) + ' ms');
// 由于echarts动画效果，延迟500毫秒确保图片渲染完毕再调用下载图片方法.
console.log("页面加载成功!");
} else {

console.log("页面加载失败 Page failed to load!");
}
// 10秒后再关闭浏览器.
setTimeout(function() {

phantom.exit();
}, 10000);
});

在刚开始使用时发现没有执行页面JS，将page.content打印才发现访问页面被登陆拦截了。

上传服务器时报错2018-09-21 15:41:29[DEBUG]-[Thread: TP-exec-1]-[org.springframework.web.method.support.InvocableHandlerMethod.getMethodArgumentValues()]: Failed to resolve argument 0 of type 'java.lang.String'

org.springframework.web.bind.MissingServletRequestParameterException: Required String parameter 'doc' is not present

后来发现是web容器做了上传限制导致,在tomcat配置中加入maxPostSize="-1"即可

Phantomjs+echarts后台生成报表遇到一个问题生成报表文件的base64编码的URL的图片,体积会100倍,内容里会多出很多个A,在GitHub搜索到类似情况并给出解决方案

https://github.com/ariya/phantomjs/issues/10455

大致因为phantomjs对canvas和png格式不兼容导致,需要明确质量参数

解决方法是修改Echarts源码将echarts中用canvas生成图片的方法指定质量参数0即可解决,类似以下:

varo="svg"===this._zr.painter.getType()?this.getSvgDataUrl():this.getRenderedCanvas(t).toDataURL("image/"+(t&&t.type||"png",0.5));