VUE 通过URL下载修改文件名的方法 和原生js 下载

今天遇到一个需求需要通过url下载的时候修改下载的文件名称，vue框架和原生的框架不同所以整理了以下可用的方法

vue框架

let url = ”;
fetch(url).then((res) => {
res.blob().then((blob) => {
const url = window.URL.createObjectURL(blob)

const a = document.createElement(‘a’)

a.href = url

a.download =  ‘你要改的文件名.后缀’;

a.click()

window.URL.revokeObjectURL(url)

})
})

js 原生框架

var xhr = new XMLHttpRequest();
xhr.responseType = “arraybuffer”;
xhr.open(“POST”, url, true);
xhr.onload = function () {
const blob = new Blob([this.response], {type:”application/vnd.ms-excel”});
if(blob.size < 1) {
alert(‘导出失败，导出的内容为空！’);
return;
}
if(window.navigator.msSaveOrOpenBlob) {
navigator.msSaveOrOpenBlob(blob, ‘test.xls’)
} else {
const aLink = document.createElement(‘a’);
aLink.style.display = ‘none’;
aLink.href = window.URL.createObjectURL(blob);
aLink.download = ‘testxls’;
document.body.appendChild(aLink);
aLink.click();
document.body.removeChild(aLink);
return;
}
}
xhr.setRequestHeader(“Authorization”, “xxx”);
xhr.setRequestHeader(“Content-Type”, “application/json”);
xhr.send(JSON.stringify(queryParams));

如有问题请给我留言谢谢