需求
在开发项目途中遇到了一个需求,就是将一个整个HTML界面导出到word文档,其中包含了echarts图表,经过一番折腾,终于完成了~~~(鸡肋),过程中用到了几个插件,总结了一下几个步骤,希望可以帮到大家。
将插件导入项目
注册echarts图表
HTMl代码
js代码
调用插件导出word文档
将页面上的文本导出到word很容易代码如下
如果你以上步骤都正确的执行了,那么现在你应该可以将HTML中的文本导出到word文档中了~很开心有木有
导出echarts图表就稍微麻烦一点点了,不过也是很轻松的(查资料的时候可不是很轻松!!!)
导出思路:将echarts图表转成图片再进行导出操作
这里要用到echarts官方的API中的getDataURL()方法,该方法会返回一个base64编码,该编码是可以直接赋值给img的src属性的具体代码如下
let imgSrc = myChart.getDataURL('png')
这里的imgSrc就是base64编码了可以直接赋值给img的src属性进行使用的,这句代码是跟在注册echarts图表的myCharts.setOption(option)后面的~~,现在你只需要将base64码绑定到img的src属性就可以将echarts报表导出word文档了~~
需要注意的点如下:
1 因为echarts图表是动态的,所以你必须在echarts图表的series属性中设置animation: false,如果不设置的话会只有背景没有具体的数据,亲测~~~不过用延迟加载也是可以的。
2 在进行导出的时候任何外联的css文件都是不起作用的,需要把样式写在标签上,反正我这里没有生效,大家可以试一下。
如果有更好的办法完成此功能,欢迎私信留言讨论~