前端导出word(包含图表)

前端导出word文档,包含(图表),先把canvas转成图片,再导出,还有点问题,不过功能实现了,不用通过后台,看到的大神可以留言提出改进的方法
【前端导出word(包含图表)】代码如下:
canvas转图片用的是html2canvas插件
Install:npm install html2canvas
use:import html2canvas from ‘html2canvas’;
vue 组件代码:
前端导出word(包含图表)
文章图片

Vue组件内的js代码:
前端导出word(包含图表)
文章图片

以上代码就是把canvas转成base64编码的图片的过程,接下来就是导出成word了,代码如下:
这是需要引入的一个导出的js库 html-docx.js 可以百度下载到本地
以下就是导出方法:
wordExport:function(e){
var cont = document.getElementById(“pdfDom”).innerHTML;
var content = ‘’ +cont;
var converted = htmlDocx.asBlob(content,{orientation:“landscape”});
saveAs(converted, ‘回溯分析报告.docx’);
}
好了,这样就可以导出word了,且没有用到后台,不过前端页面就有点明显的卡顿了,欢迎留言~~~

    推荐阅读