vue 原生js请求接口并下载文件三种方法axios fetch XMLHttpRequest
【代码】vue 原生js请求接口并下载文件三种方法axios fetch XMLHttpRequest。
·
const row = this.handleEditRowData;
const Url = `http://`;
let fileName = '文件名';
let _this = this;
//1.axios
axios
.get(Url, {
responseType: "blob",
})
.then((res) => {
//把文件内容转为转为blob对象 type默认为txt,其他格式需对应设置此处zip
let blob = new Blob([res.data],{ type: 'application/zip' });
let url = window.URL.createObjectURL(blob);
//创建临时的a链接添加点击事件用于下载以下为a标签方法
let a = document.createElement("a");
a.href = url;
a.download = fileName;
a.click();
//释放url
window.URL.revokeObjectURL(url);
//之后的操作
});
//发请求
//2.fetch
fetch(Url, {
method: 'Get',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
}).then(res => {
res.blob().then(blob => {
const blobUrl = window.URL.createObjectURL(blob);
const a = window.document.createElement('a');
a.href = Url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(blobUrl);
_this.directUpdate();
});
});
//原生的XMLHttpRequest对象方法此处没有设置application格式 文件名后缀加zip一样效果
let xhr = new XMLHttpRequest();
xhr.open("GET", Url, true); // 也可以使用POST方式,根据接口
//写入请求头
xhr.setRequestHeader("Content-type", "application/json")
xhr.responseType = "blob";
xhr.onprogress = function (event) {};
xhr.onload = function () {
if (this.status === 200) {
let content = this.response;
let aTag = document.createElement("a");
let blob = new Blob([res.data],{ type: 'application/zip' });
aTag.download = fileName;
aTag.href = URL.createObjectURL(blob);
aTag.click();
URL.revokeObjectURL(blob);
loading.close();
_this.directUpdate();
}
};
xhr.send()
//不写请求头·可以在文件名后加 '.zip'
更多推荐
已为社区贡献4条内容
所有评论(0)