<n-button @click="downloadClick">下载模板 </n-button>
//下载
function downloadClick() {
exportIndicatorValue().then((res) => {
let name = '模板';
createExcel(res, name);
});
}
function createExcel(res, name) {
let blob = new Blob([res], {
type: 'application/vnd.ms-excel',
});
let fileName = name + '.xlsx'; // 文件名+后缀
// 允许用户在客户端上保存文件
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, fileName);
} else {
var link = document.createElement('a'); //定义一个a标签
link.href = window.URL.createObjectURL(blob); //需要生成一个 URL 来实现下载,链接到blob上
link.download = fileName; //下载后的文件名称
console.log('fileName', link);
link.click(); //模拟在按钮上实现一次鼠标点击
window.URL.revokeObjectURL(link.href); //释放 URL 对象
}
}
请求接口
export function exportIndicatorValue() {
return http.request(
{
url: '/api/download',
method: 'get',
responseType: 'blob',
},
{
isTransformResponse: false,
}
);
}
如果接口直接返回的是二进制流形式而不是像普通接口格式(有code啥的),前端获取时会被封装的axios拦截,所以要在接口请求时加上isTransformResponse: false