摘要：方式请求的数据只能存放在内存空间，可以通过访问，但是无法保存到硬盘，因为不能直接和硬盘交互，否则将是一个安全问题。是第一个第三方的库，所以同理。这里是返回的对象这里表示类型创建下载的链接下载后文件名点击下载下载完成移除元素释放掉对象
前言
我的项目中有一个需求：点击按钮生成可编辑的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对象
})
}
}
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/93439.html
摘要：导出的页面组件如下导出方法获取要导出的组件页面的把它设置成变量一文本并通过导出获取要导出组件页面的的标签代码，通过获取，也可以通过获得构造页面，并使用构造一个文件流并下载，如下具体代码如下的简历获取另外一种方式迅聘选才导出 导出的页面组件如下： 1、导出html 方法：1）获取要导出的组件页面的css把它设置成js变量一文本并通过export导...
摘要：使用了第三方实现生成文档，但是发现下划线无法满足需求。修改源码以便后人踩坑以下是我的一个，通过传参数设置下划线颜色以及高度。 使用了 officegen 第三方 api 实现生成word 文档，但是发现下划线无法满足需求。修改源码以便后人踩坑,以下是我的一个demo，通过传参数设置下划线颜色以及高度。本demo 通过json 配置方式，还有api 调用方式实现方式，详细可以参考git ...
摘要：有两种方法，一种是在开发环境中设置通过的，另一种是在服务器上修改的配置设置。这样我们以后使用访问接口就可以不加了，打包后访问也不用手动去除统一管理在项目开发过程中，会涉及到很多接口的处理，当项目足够大时，就需要统一管理接口。 这篇文章总结了vue项目的所遇到的问题，包括跨域、用户认证、接口统一管理、路由配置、兼容性处理，性能优化等内容。 项目github地址 : 前端 https:...
摘要：下面也是以模块的模块集为例，可以发现和路由有一些不同就是这里为了防止模块跟全局耦合，运用函数式编程思想类似于依赖注入，将全局的实例作为函数参数传入，再返回出一个包含的对象，这个导出的对象将会被以模块名命名，合并到全局的集中。 前言 web前端发展到现代，已经不再是严格意义上的后端MVC的V层，它越来越向类似客户端开发的方向发展，已独立拥有了自己的MVVM设计模型。前后端的分离也使前端人...
阅读 1261·2021-09-02 10:19
阅读 1064·2019-08-26 13:25
阅读 2067·2019-08-26 11:37
阅读 2387·2019-08-26 10:18
阅读 2645·2019-08-23 16:43
阅读 2926·2019-08-23 16:25
阅读 739·2019-08-23 15:53
阅读 3270·2019-08-23 15:11
