第四次是我成功的方案 其他只作为记录 (解决问题直接去看第四方案)
第一次尝试:
window.open(url)
这种情况遇见浏览器不能识别的会下载,浏览器能识别到的还会打开,比如text文本链接等。
第二次尝试:
window.location.href = url
这种用法和第一次效果相同
第三次尝试:
var a= document.createElement('a');
document.body.appendChild(a);
a.href = url;
a.download = filename;
a.click();
document.body.removeChild(a);
咳咳 想靠动态创建a标签来进行点击下载text文件 结果失败
第四次尝试:
downloadFile(url,fileName) {
var x = new XMLHttpRequest();
x.open("GET", url, true);
x.responseType = 'blob';
x.onload = function (e) {
var url = window.URL.createObjectURL(x.response)
var a = document.createElement('a');
a.href = url
a.download = fileName ;
a.click()
}
x.send();
this.$message.success('下载成功!')
}
哎!!这就可以了 url本身就是给api 创建个XMLHttpRequest对象请求后为Blob数据 对其再生成一个url 这样浏览器就不会再识别成打开text文件了
方案五(这个方案我没尝试,无意间看到的,本质和方案四差不多)
axios({
url: `${Prefix}/xxx/xxx`,
method: 'post',
responseType: 'blob',
data: {},
}).then((result) => {
let filename = result.headers['content-disposition'] .split(';')[1].split('filename=')[1];
var blob = new Blob([result.data], {
type:
'application/vnd.openxmlformatsofficedocument.spreadsheetml.sheet;charset=utf-8',
}),
Temp = document.createElement('a');
Temp.href = window.URL.createObjectURL(blob);
Temp.download = window.decodeURI(filename);
document.body.appendChild(Temp);
Temp.click();
document.body.removeChild(Temp);
window.URL.revokeObjectURL(Temp);
});