前端vue实现导出word文档（包含echarts图表、文本）html-docx-jsFileSaver
实现页面中的echarts导出到word并附带文字说明
1. 安装html-docx-js插件（0.3.1）版本
npm install html-docx-js --save
2. 安装FileSaver插件（2.0.5）版本
npm install html-docx-js --save
3. 导出的图表
本文以折线图为例，将折线图的代码以子组件的方式编写，子组件名称为：lineChart ，绑定ref值：myLineChart
4. 拼接数据（echarts+文本）设置样式
注意，以下代码都需要我们进行拼接操作==
let content =
''
content +=
`
})
图1 ${ this.xxx }关注度趋势监测
`
content += ''
以上操作为：定义html文件信息，获取定义的子组件
以img标签作为容器，通过执行echarts提供的方法获取图表的src链接，使用es6 ${}方法进行赋值
此时，我们想为img标签或者p标签添加样式应该怎么做呢？
我们需要给标签添加行内样式，并且只能是行内样式，使用class或者id不可以
比如我们设置以下样式：
- 图片宽高为300
- 图片在word中居中显示
- 文字为宋体
- 字体大小为三号、四号、二号
- 设置固定行高（word中称为磅）
我们可以这么设置：
content +=
`
图1 ${
this.xxx
}事件关注度趋势监测
`
- font-family: ‘SimHei’, serif;"设置字体为宋体
- font-size: 14pt为四号，16pt为三号，22pt为二号，可自行设置其他字号
- 其中line-height: 29pt为word中的行间距29磅
拼接完成并且设置完样式后只需要执行导出导出就可以了
5. 执行导出操作
这时，需要用到我们刚才安装的两个插件html-docx-js和 FileSaver，html-docx-js的作用是：用html字符串来作为导出文档的输入
FileSaver执行导出操作
let converted = htmlDocx.asBlob(content)
FileSaver.saveAs(converted, 'xxx报告.docx')
结果展示
