今天就調用后端接口下載excel文件為例子
首先申明下載接口
export const exportChargeRecord = (ids) => {
return request({
url: '/api/ad-pay-service/sysForm/admin/export-charge-record',
method: 'get',
responseType: 'blob',
params: {
ids
}
})
};
然后在 methods 中創(chuàng)建導出方法,調用即可
exportChargeRecord(ids.join(",")).then(res => {
let blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8\''})
// 這里的類型,設置的是你下載文件的具體類型. 不同的文件類型可能不一樣. 需要自己指定.
let downloadElement = document.createElement('a');
let contentDisposition = res.headers['content-disposition'];
let patt = new RegExp("filename=([^;]+\\.[^\\.;]+);*");
let result = patt.exec(contentDisposition);
let filename = decodeURI(result[1]);
let href = window.URL.createObjectURL(blob); //創(chuàng)建下載的鏈接
downloadElement.href = href;
downloadElement.download = filename; //下載后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //點擊下載
document.body.removeChild(downloadElement); //下載完成移除元素
window.URL.revokeObjectURL(href); //釋放blob對象
})
這里的exportChargeRecord 這里是一個axios 封裝的方法, 這里需要小心的是, res.data可能無法下載,很多人可能是直接返回的文件流,也就是說res就是一個文件流, 直接使用res即可,如果你將文件流放在res的其他字段的話,需要指定具體的字段才行.
