写在前面
本文实现文件下载的两种方式。第一种：文件流形式，第二种接口返回url地址
一、文件流形式( responseType: 'blob',)
js文件封装axios：
export function controlsExport(params) { //微站站点导出
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文件调用方法：
methods: {
exportExl(){
controlsExport(this.listQuery).then(response => {
const blob = new Blob([response]);//new Blob([res])中不加data就会返回下图中[objece objece]内容（少取一层）
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 对象
});
}
}
二、接口返回url地址(正常接口获取就行)
methods: {
handleDownload(row) {
loadFile({id:row.id}).then(res =>{
const ele = document.createElement('a');
ele.setAttribute('href', res.data); //设置下载文件的url地址
let str=res.data.substring(res.data.lastIndexOf("/"));
let str2=str.split('/')[1];
ele.setAttribute('download',str2);//用于设置下载文件的文件名
ele.click();
})
}
}
image.png
