第一种:直接通过连接下载Excel
window.location.href = 'https://x.x.x.243/static/sample/template.xlsx';
第二种:后端返回文件流下载导出Excel
首先 axios需要设置 responseType: 'blob';
如果需要自定义下载文件名可以使用elementUI的组件;
完整代码如下:
public exportExcel () { this.$prompt(' ', 'Please enter the file name :', { confirmButtonText: 'confirm', cancelButtonText: 'cancel', inputPattern: /.*[^s]/, //验证文件名不为空 inputErrorMessage: 'illegal filename', //文件名不合规报错信息 inputValue: `xxx-${this.nowDate}` //名字为xxx+现在时间 // @ts-ignore }).then(({ value }) => { let data = { method:'post', //请求方式 url:'url/export', //请求地址 fileName: value+'.xlsx', //文件名称,此处为上面的inputValue params: getNowDate('-') //参数 } this.handleExportExcel(data); }).catch(() => {}); } public async handleExportExcel(data:any){ axios({ method: data.method, url: data.url, data: data.params, responseType: 'blob' //此处必须设置 }).then((res) => { //以下为下载Excel的代码块流程
const link = document.createElement('a'); let blob = new Blob([res.data], {type: 'application/vnd.ms-excel;'}); link.style.display = 'none'; link.href = URL.createObjectURL(blob); link.download = data.fileName; document.body.appendChild(link); link.click(); document.body.removeChild(link); console.log(res)
}).catch(error => { console.log('error') }); }