vue 生产word_nodejs(officegen)+vue(axios)在客户端导出word文档
前言
我的项目中有一个需求:点击按钮生成可编辑的word文档订单详情的信息
我使用的前端框架是Vue.js、后台使用的是node.js
node.js生成和导出word文档我参考的是下面这两篇文章,写的挺好的(github上的那篇里面还有node.js生成word、excel、ppt的example,需要详细的可以看里面)
http://blog.csdn.net/liyanhui...
https://github.com/Ziv-Barber...
问题
node.js上面这两篇文章已经讲的很不错了,但是我在实现的过程中还是出现了一个问题:我在后端能生成一个完整的word文档,但是在返回前端下载的时候遇到了问题。一开始我一直都以为node.js后台方面的代码导致的,毕竟我是第一次写嘛^_^,但是在不断的测试中我发现:
1、点击按钮用vue里面的axios请求localhost:8081/order/getDoc没有直接生成word文档,把返回的数据console.log(res)出来查看,发现得到的数据是一堆的乱码的字符串
2、但是在浏览器地址栏中请求同样的后端接口,发现能生成一个整个的word文档!
问题根源
有了头绪我就开始上网搜寻,我发现,ajax的接受类型只能是string字符串,不是流类型,所以无法实现文件下载。ajax方式请求的数据只能存放在javascipt内存空间,可以通过javascript访问,但是无法保存到硬盘,因为javascript不能直接和硬盘交互,否则将是一个安全问题。
axios是第一个第三方的ajax库,所以同理。
解决方法
解决的方法我参考了一篇文章前端axios下载excel(二进制)https://www.cnblogs.com/xueji...
解决方法:利用了blob对象,Blob对象可以看做是存放二进制数据的容器,它是一个二进制大对象,是一个可以存储二进制文件的容器。
methods:{
handleClick(row){
console.log(row);
var orderId = row.orderId + row.oid.toString();
console.log(orderId);
this.$ajax({
method:"get",
url:"http://localhost:8081/order/getDoc",
responseType:'blob'
}).then((res)=>{
//这里res.data是返回的blob对象
var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'}); //application/vnd.openxmlformats-officedocument.wordprocessingml.document这里表示doc类型
var downloadElement = document.createElement('a');
var href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href = href;
downloadElement.download = orderId+'.docx'; //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象
})
}
}
vue 生产word_nodejs(officegen)+vue(axios)在客户端导出word文档相关推荐
- vue项目+element表格前端使用纯js导出word文档
详细请读https://www.jianshu.com/p/0de31429b12a这篇文章 首先安装各种工具: -- 安装 docxtemplater cnpm install docxtempla ...
- vue前端html页面导出word文件,Vue-纯前端导出word文档
在项目中,我们可以借助后端返回文件流实现文件下载.如果前端有数据,也可以借助前端框架进行下载.本文将介绍如何在前端纯js实现word文档导出. 1. 组件介绍 要实现前端纯js导出word文档,我们需 ...
- vue页面导出Word文档(含图片)
引用插件 安装 npm i docxtemplater@3.17.6 npm i pizzip npm i jszip-utils@0.1.0 npm i jszip@2.6.1 npm i file ...
- vue 导出word文档(包括图片)
vue 导出word文档(包括图片) 1.打开终端,安装依赖 -- 安装 docxtemplater npm install docxtemplater pizzip --save-- 安装 jszi ...
- 「Vue To Words」 - 教你在Vue项目中导出Word文档(包含表格合并,图片修改大小)
前言:最近在项目中遇到了,vue页面需要导出word文档,今日就进行记录一下,如有不对的地方,还请见谅 ^^ 简单说一下需求:需要导出的页面是表格页面,因为包含表格的嵌套和合并,其实最主要的就是导出页 ...
- vue实现导出word文档(含多张图片)
一.实现效果 以填写并导出房屋出租审批表为例,首先填写表格相应内容后,点击" 导出 "按钮实现word文档的导出功能,界面如下所示: 最后导出word文档如下所示: 二.所需插件 ...
- vue动态导出word文档
首先 要npm这四个依赖包 jszip jszip-utils docxtemplater file-saver 个人建议用cnpm , npm总是会出现莫名其妙的问题 hellowword.vue ...
- vue 导出word文档,支持表格和图片
一.导入包 npm install docxtemplater npm install pizzip npm install jszip npm install jszip-utils npm ins ...
- 番外-vue 导出word文档(包括屏幕截图)
在线效果(用户名:liu:密码:12345) 点击数据管理统计->数据管理->导出模板按钮 参考 1,安装包 npm install docxtemplater pizzip --save ...
最新文章
- Linux zip-tar.gz 压缩解压
- GTX1080 安装 CUDA 7.5
- 安装 SharePoint 2013
- if null 锁 java_史上最全 Java 中各种锁的介绍
- 彻底卸载SqlServer2008R2
- 不同vlan同段IP通信
- linux下c语言动态库生成方法
- 解决Request method 'GET' not supported问题
- 【图解算法】最小生成树
- 【毕业设计】基于大数据的抖音短视频数据分析与可视化 - python 大数据 可视化
- Oracle将监听服务注册到集群中,110 ORACLE实例配置多个监听器
- 物联网和工业物联网有什么区别?
- 俄罗斯卢布为什么整个2016年都在升值?
- 快手打开后不显示画面_快手打开不显示图像怎么办
- 【腾讯TMQ】测试建模兵器谱
- 2019XUPT_ACM校赛总结
- 手机wifi显示未连接服务器,客户端显示wifi未连接到服务器
- Keil系列软件安装(二)Keil5 MDk
- Ninja安装和基本使用
- 企业级docker安装kong,konga实战
热门文章
- datax源码阅读二:Engine流程
- “物联网+云平台”的实验室管理方案,瞄准的是生物医药和化工行业
- github推送错误:已经有此代码,不允许覆盖的解决方法
- 工具介绍:SUN CAM阵列管理客户端
- C# webrequest 抓取数据时,多个域Cookie的问题
- C# DataTable分页处理
- DWZ中Tree树形菜单的treeCheck如何获取返回值解决方案
- 解决Git中fatal: refusing to merge unrelated histories
- Python中的支持向量机SVM的使用(有实例有源码)
- redis和kafka比较