图表导出后台使用phantomjs爬虫技术导出页面,前端需要做的就是做出一个可以在内网下访问的一个页面,需要获取数据的地方后端会将这些接口加入白名单,所以页面和数据都可以不被限制的访问到,这是前提,下面记录一下遇到的问题。
1.使用echarts做的图表导出显示空白,解决方法:报表全部使用highcharts而不使用echarts。
2.页面样式和导出的pdf样式不一样,原因不详,解决方法:反其道而行之,字偏左就让页面偏右,字体太大就让页面字体偏小,反正最后就是页面样式很丑,单导出的却很漂亮,但是普通用户看不到页面,所以完全可以这样做的。
3.highcharts柱状图x轴文本标签显示异常,在页面上x轴文本可以不显示全,因为鼠标移上去就可以看到全部,但是导出的pdf就不可以,所以必须要显示完整。在这里要注意一点x轴文本是英文的的情况下是可以很简单的在页面上显示完整的,但是中文的就不可以,具体原因可自行百度
算了,就直接贴终极结局方案的代码吧,虽然看上去挺简单的,但是你可能不知道我是删了改改了删了多少次
最后导出的pdf效果图如下