前端导出word（包含图表）

爱吃火腿的子车鸿轩

已于 2022-03-02 17:05:50 修改

阅读量7.5k

点赞数 4

分类专栏：原创文章标签： Vue 前端导出word

于 2019-02-26 13:29:43 首次发布

本文链接：https://blog.csdn.net/weixin_39143969/article/details/87933306

版权

原创专栏收录该内容

17 篇文章 1 订阅

订阅专栏

前端导出word文档，包含（图表），先把canvas转成图片，再导出，还有点问题，不过功能实现了，不用通过后台，看到的大神可以留言提出改进的方法

代码如下：
canvas转图片用的是html2canvas插件
Install：npm install html2canvas
use:import html2canvas from ‘html2canvas’;
vue 组件代码：
img标签内是图片显示的区域标签内的是需要截图的部分，他可以把canvas连带一些HTML内容都转成base64编码的图片
Vue组件内的js代码：
dataURL就是转成功的base64编码的图片了，由于导出页面的时候之前的HTML代码还是存在于页面的，所以需要将他隐藏掉，可是导出的word中还是能看见，看到的大神可以留言改进
以上代码就是把canvas转成base64编码的图片的过程，接下来就是导出成word了，代码如下：
这是需要引入的一个导出的js库 html-docx.js 可以百度下载到本地
以下就是导出方法：

wordExport:function(e){
     var cont = document.getElementById("pdfDom").innerHTML;
     var content = '<!DOCTYPE html>' +cont;
     var converted = htmlDocx.asBlob(content,{orientation:"landscape"});
     saveAs(converted, 'word文件名.docx');
}

好了，这样就可以导出word了，且没有用到后台，不过前端页面就有点明显的卡顿了，欢迎留言~~~

爱吃火腿的子车鸿轩

关注

4
点赞
踩
18

收藏

觉得还不错? 一键收藏
5
评论
前端导出word（包含图表）

前端导出word文档，包含（图表），先把canvas转成图片，再导出，还有点问题，不过功能实现了，不用通过后台，看到的大神可以留言提出改进的方法代码如下：canvas转图片用的是html2canvas插件Install：npm install html2canvasuse:import html2canvas from ‘html2canvas’;vue 组件代码：Vue组件内的js...
复制链接

扫一扫