实现页面中的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')
结果展示
本文转载自: https://blog.csdn.net/weixin_41838325/article/details/141964500
版权归原作者 初级码农- 所有， 如有侵权，请联系我们删除。
版权归原作者 初级码农- 所有， 如有侵权，请联系我们删除。