1.可直接下载的文件链接
js
const fileDownloadUrl = '';
window.open(fileDownloadUrl)
location.href = fileDownloadUrl
fetch(fileDownloadUrl).then(res => res.blob()).then(blob => {
const a = document.createElement('a');
document.body.appendChild(a)
a.style.display = 'none'
const url = window.URL.createObjectURL(blob);
a.href = url;
a.download = name;
a.click();
document.body.removeChild(a)
window.URL.revokeObjectURL(url);
});
vue
<el-link type="primary" :underline="false" :href="fileDownloadUrl">模板下载</el-link>
<a :href="fileDownloadUrl" :download="fileDownloadUrl" target="_blank">
2.文件流
axios版
const apiurl = ''
this.exportLoading = true
axios.post(apiurl, params, {
'responseType': 'blob'
}).then( (response) =>{
console.log('response', response, response.data.size)
this.exportLoading = false
if(response.data){
if(response.data.size < 1000){
if(response.data.size == 63){
this.$message.warning('查无结果');
return
}
if(response.data.size == 84){
this.$message.warning('导出数据超出最大限制值');
return
}
}else{
const blob = new Blob([response.data],{type: 'application/vnd.ms-excel'})
const linkNode = document.createElement('a');
linkNode.style.display = 'none';
linkNode.href = URL.createObjectURL(blob);
document.body.appendChild(linkNode);
linkNode.click();
URL.revokeObjectURL(linkNode.href);
document.body.removeChild(linkNode);
}
}
}).catch( (error) =>{
console.log(error);
this.exportLoading = false
});