本例使用vue做前端项目 和 express做后端服务
axios的config参数 responseType: 'blob' ,很多地方都提到需要设置，我没有设置也能正常下载
依赖
concurrently 插件来运行命令
nodemon 监控重启 node 后台
cors 处理跨域
a标签下载文件
download(){ let href = "http://localhost:8080/download"; const dom = document.createElement('a'); dom.style.display = 'none'; dom.href = href; document.body.appendChild(dom); //点击下载 dom.click(); //下载完成移除元素 document.body.removeChild(dom); },
axios下载
async downloadFile(){ const res = await axios.get("http://localhost:8080/file"); console.log(res); const blob = new Blob([res.data], {type: res.headers['content-type']}); let patt = new RegExp("filename=([^;]+\\.[^\\.;]+);*"); let result = patt.exec(res.headers['content-disposition']); let filename = decodeURI(result[1]); const downloadElement = document.createElement('a'); const href = window.URL.createObjectURL(blob); console.log(filename); downloadElement.style.display = 'none'; downloadElement.href = href; downloadElement.download = filename ; //下载后文件名 document.body.appendChild(downloadElement); downloadElement.click(); //点击下载 document.body.removeChild(downloadElement); //下载完成移除元素 window.URL.revokeObjectURL(href); //释放掉blob对象 }
后端服务需要做一些特殊设置
// 设置的文件名，需要对 filename 进行转码，防止下载的文件名中有中文时出现乱码。
res.setHeader("Content-Disposition", "attachment; filename=" + encodeURI(filename));
res.setHeader("Content-Type", 'application/octet-stream');
// axios下载文件取不到content-disposition需要添加响应头
res.setHeader("Access-Control-Expose-Headers", "Content-Disposition");
下载图片
可以直接用img标签加链接就可以显示
<img v-if="imageSrc" :src="imageSrc" alt=""> • 1
代码文件：https://github.com/mouday/Vue-Demo/tree/main/vue-axios
参考
https://blog.csdn.net/shuangmu9768/article/details/108846417
