需求

在开发项目途中遇到了一个需求，就是将一个整个HTML界面导出到word文档，其中包含了echarts图表，经过一番折腾，终于完成了~~~（鸡肋），过程中用到了几个插件，总结了一下几个步骤，希望可以帮到大家。

顺序一定不能乱，顺序按照图中顺序导入，插件的源码网上搜一下很多的~~~

HTMl代码

写一个空的div来存echarts图表

js代码

这里是引用的官方的例子，这样你的echarts图表就诞生了~

将页面上的文本导出到word很容易代码如下

.main就是你要导出某个div的类名称，'检索报告'就是你导出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文件都是不起作用的，需要把样式写在标签上，反正我这里没有生效，大家可以试一下。

如果有更好的办法完成此功能，欢迎私信留言讨论~