js将html转为word文档,js将html导出到word文档(含echarts图表)

需求

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

将插件导入项目

d260ede50542

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

注册echarts图表

HTMl代码

d260ede50542

写一个空的div来存echarts图表

js代码

d260ede50542

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

调用插件导出word文档

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

d260ede50542

.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文件都是不起作用的,需要把样式写在标签上,反正我这里没有生效,大家可以试一下。

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值