blob下载指定格式的文件
主要逻辑
handleExportExcel(){
exportExcel().then(res=>{
const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' }) //
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', `花名册列表-${dayjs().format('YYYY-MM-DD')}`)
document.body.appendChild(link);
link.click();
document.body.removeChild(link); // 下载完成移除元素
window.URL.revokeObjectURL(url); // 释放掉blob对象
})
}
注意点
-
首先前后端的响应类型应该相同
- 查看浏览器请求响应头
content-type
值是否与Blob
构造函数中的type相同,各种MIME类型对应值查看 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
- 查看浏览器请求响应头
-
注意乱码问题
- 前端在请求接口中axios中设置
responseType:'blob'
resopnseType对应值查看http://www.axios-js.com/zh-cn/docs/#axios-create-config
export function exportExcel(data) { // 导出 return request({ url: '/exportExcel', method: 'post', responseType: 'blob', data }) }
- 前端在请求接口中axios中设置