寫在前面
本文實(shí)現(xiàn)文件下載的兩種方式。第一種：文件流形式哭当，第二種接口返回url地址
一、文件流形式( responseType: 'blob',)
js文件封裝axios：
export function controlsExport(params) { //微站站點(diǎn)導(dǎo)出
return request({
responseType: 'blob',
url: '/ebap-business/a/control/exportControl',
method: 'post',
data:params
})
}
image.png
vue文件引入axios api：
import {controlsExport} from '@/api/daManage'
vue文件調(diào)用方法：
methods: {
exportExl(){
controlsExport(this.listQuery).then(response => {
const blob = new Blob([response]);//new Blob([res])中不加data就會(huì)返回下圖中[objece objece]內(nèi)容（少取一層）
const fileName = '模板.xls';//下載文件名稱
const elink = document.createElement('a');
elink.download = fileName;
elink.style.display = 'none';
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 釋放URL 對(duì)象
});
}
}
二冗澈、接口返回url地址(正常接口獲取就行)
methods: {
handleDownload(row) {
loadFile({id:row.id}).then(res =>{
const ele = document.createElement('a');
ele.setAttribute('href', res.data); //設(shè)置下載文件的url地址
let str=res.data.substring(res.data.lastIndexOf("/"));
let str2=str.split('/')[1];
ele.setAttribute('download',str2);//用于設(shè)置下載文件的文件名
ele.click();
})
}
}
image.png
