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

初级码农-

已于 2024-09-06 17:52:28 修改

阅读量1.5k

点赞数 12

分类专栏：插件类文章标签：前端 javascript vue.js echarts css

于 2024-09-06 17:50:58 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_41838325/article/details/141964500

版权

插件类专栏收录该内容

2 篇文章

订阅专栏

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

<lineChart ref="myLineChart"/>

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

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

let content =
        '<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body>'
content += 
`
	<div>
	  <img src="${this.$refs[
	    'myLineChart'
	  ].copyLineChart.getDataURL()}">
	</div>
	<p>图1 ${ this.xxx }关注度趋势监测</p>
`
content += '</body></html>'

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

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

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

我们可以这么设置：

content += 
`
	<div style="margin: 0 auto;text-align: center">
	  <img width="450" height="300" style="text-align: center;margin: 0 auto;" src="${this.$refs[
	    'myLineChart'
	  ].copyLineChart.getDataURL()}">
	</div>
	<p style="text-align:center;font-size: 14pt; line-height: 29pt;font-family: 'SimHei', serif;">图1 ${
	  this.xxx
	}事件关注度趋势监测</p>
`

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')

结果展示

在这里插入图片描述