vue获取后端的Blob文件流,下载文件
适用于pc端和移动端:
一、公共方法:
1. 获取后端文件流
1 // 通过后端接口拿到文件流 2 export function getBlob(url, parameter, method) { 3 return request({ 4 url: url, 5 method: method || 'post', 6 data: method !== 'get' ? parameter : null, 7 params: method === 'get' ? parameter : null, 8 responseType: 'blob' // 这一行是关键,拿到blob数据类型的文件 9 }) 10 }
2. 下载 blob 文件流
export function downloadFile(data, fileName, fileSuffix) { let fileTypeMime = '' // 文件 mime 类型,移动端必传,否则下载不成功;pc端可传可不传 switch (fileSuffix) { // 获取后缀对应的 mime case 'png': fileTypeMime = 'image/png'; break; case 'doc': fileTypeMime = 'application/msword'; break; case 'docx': fileTypeMime = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'; break; case 'jpg': case 'jpeg': fileTypeMime = 'image/jpeg'; break; case 'gif': fileTypeMime = 'image/gif'; break; case 'svg': fileTypeMime = 'image/svg+xml'; break; case 'tif': case 'tiff': fileTypeMime = 'image/tiff'; break; case 'txt': fileTypeMime = 'text/plain'; break; case 'ppt': fileTypeMime = 'application/vnd.ms-powerpoint'; break; case 'pptx': fileTypeMime = 'application/vnd.openxmlformats-officedocument.presentationml.presentation'; break; case 'xls': fileTypeMime = 'application/vnd.ms-excel'; break; case 'xlsx': fileTypeMime = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'; break; case 'zip': fileTypeMime = 'application/zip'; break; case '7z': fileTypeMime = 'application/x-7z-compressed'; break; } let blob = window.URL.createObjectURL(new Blob([data], { 'type': fileTypeMime })) let link = document.createElement('a') link.style.display = 'none' link.href = blob link.setAttribute('download', fileName + fileSuffix) document.body.appendChild(link) link.click() document.body.removeChild(link) //下载完成移除元素 window.URL.revokeObjectURL(blob) //释放掉 blob 对象 }
二、业务中调用:
1 // 导出报告: 2 exportReport() { 3 getBlob(url, param, 'get').then(data => { 4 // 拿到 blob 数据类型 5 downloadFile(data, 文件标题, '.docx') 6 }) 7 }
生活是痛苦的白天,死亡是凉爽的夜晚。