根据接口地址实现文件下载，我比较喜欢两种方式：第一种是直接使用location.href实现文件下载，第二种是使用ajax调接口实现文件下载。
假如：接口地址：http://localhost:8080/abc/index/api/files
一：location.href实现方式：
直接在事件中写入：
location.href=http://localhost:8080/abc/index/api/files;优点：代码简洁，不需要使用ajax实现接口调用；下载后的文件类型和文件名称不需要前端自己定义，直接会识别后端定义好的文件名和文件类型。
缺点：当文件较大时，等待时间较长时不方便定义等待状态（比如，下载过程启用v-loading加载），容易造成，点击下载后，很长时间没有反应，用户体验不佳。
二：使用ajax调接口实现方式：(利用blob读取接口返回二进制流)
在事件中写入：
var that=this;
that.loading = true; //使用v-loading加载
var url = 'http://localhost:8080/abc/index/api/files';
var xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.responseType = "blob"; // 返回类型blob
// 定义请求完成的处理函数
xhr.onload = function () {
// 请求完成
if (this.status === 200) {
// 返回200
var blob = this.response;
var reader = new FileReader();
reader.readAsDataURL(blob); // 转换为base64，可以直接放入标签href
reader.onload = function (e) {
// 创建一个a标签用于下载
var a = document.createElement('a');
a.download = 'abc.txt'; //定义文件名称和文件类型
a.href = e.target.result;
$("body").append(a);
a.click();
$(a).remove();
that.loading = false; //下载完成，将loading加载关闭
}
}
}
// 发送ajax请求
xhr.send();优点：当文件较大时，等待时间较长可以非常方便的定义等待状态（比如，下载过程启用v-loading加载）用户体验较好。
缺点：代码量大；下载时的文件类型和文件名称都前端自己定义，不能识别后端定义好的文件名和文件类型（在实现过程中，必须要清楚的知道下载的文件名称和文件类型，特别是文件类型，如果文件类型定义错误，是不能成功打开下载的文件）。
最后：如果下载文件后不能正常打开，就需要设置response-content-type类型：文件下载最常用application/octet-stream。
application/xhtml+xml ：XHTML格式
application/xml ： XML数据格式
application/atom+xml ：Atom XML聚合格式
application/json ： JSON数据格式
application/pdf ：pdf格式
application/msword ： Word文档格式
application/octet-stream ： 二进制流数据（如常见的文件下载）
application/x-www-form-urlencoded ： <form encType=””>中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）如：location.href=http://localhost:8080/abc/index/api/files?response-content-type=application/octet-stream
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/66317.html
