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 }
生活是痛苦的白天,死亡是凉爽的夜晚。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛(1)