前端vue实现导出word文档（包含echarts图表、文本）html-docx-js|FileSaver

实现页面中的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

"myLineChart"/>

4. 拼接数据（echarts+文本）设置样式

注意，以下代码都需要我们进行拼接操作==

let content =
        ''
content += 
`
	

	  ${this.$refs[
	    'myLineChart'
	  ].copyLineChart.getDataURL()}">
	
	
图1 ${ this.xxx }关注度趋势监测
`
content += ''

以上操作为：定义html文件信息，获取定义的子组件
以img标签作为容器，通过执行echarts提供的方法获取图表的src链接，使用es6 ${}方法进行赋值

此时，我们想为img标签或者p标签添加样式应该怎么做呢？
我们需要给标签添加行内样式，并且只能是行内样式，使用class或者id不可以
比如我们设置以下样式：

• 图片宽高为300
• 图片在word中居中显示
• 文字为宋体
• 字体大小为三号、四号、二号
• 设置固定行高（word中称为磅）

我们可以这么设置：

content += 
`
	

	  ${this.$refs[
	    'myLineChart'
	  ].copyLineChart.getDataURL()}">
	
	
图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')

结果展示