vue3实现文件下载

前言

在使用vue3+ts实现文件的下载需求时,遇到了很多问题,在这里记录一下文件下载的过程

实现文件下载

这里我以下载zip文件为例子

代码如下:

bash 复制代码
axios.post('/generate_voice',param,{
        responseType: "arraybuffer"   # 重点
      })
      .then(response => {
        console.log(response);
        var zipName = "voice"; // 下载的文件名
	    let blob = new Blob([response.data], { type: "application/zip" }); // 下载格式为zip
	    if ("download" in document.createElement("a")) {
	      let elink = document.createElement("a"); // 创建一个<a>标签
	      elink.style.display = "none"; // 隐藏标签
	      elink.href = window.URL.createObjectURL(blob); // 配置href
	      elink.download = zipName;
	      elink.click();
	      URL.revokeObjectURL(elink.href); // 释放URL 对象
	      document.body.removeChild(elink); // 移除<a>标签
	    } else {
	      //IE10+
	      // navigator.msSaveBlob(blob, zipName);
      }
        loading.value = false

      })
      .catch(error => {
        console.error(error);
        loading.value = false
      });

遇到的问题

在其他文章中, responseType的值不是arraybuffer,而是blob

responseType: 'blob',但是在我的代码中,使用blob,会出现zip文件格式错误

另外,以下代码,会出现response.dataundefined的现象

bash 复制代码
let blob = new Blob([response.data], { type: "application/zip" }); // 下载格式为zip

经过问题排查,是因为在封装axios的时候,响应拦截器直接返回了response.data

应改为:response

参考

https://blog.csdn.net/weixin_46205984/article/details/132563160
https://blog.csdn.net/weixin_41601114/article/details/106373982

相关推荐
Sheldon一蓑烟雨任平生19 分钟前
Vue3 表单输入绑定
vue.js·vue3·v-model·vue3 表单输入绑定·表单输入绑定·input和change区别·vue3 双向数据绑定
瓜瓜怪兽亚1 小时前
前端基础知识---Ajax
前端·javascript·ajax
AI智能研究院1 小时前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js
qq7798233401 小时前
React组件完全指南
前端·javascript·react.js
EndingCoder1 小时前
MongoDB基础与Mongoose ODM
服务器·javascript·数据库·mongodb·中间件·node.js
qq7798233402 小时前
React Hooks完全指南
前端·javascript·react.js
Moment2 小时前
性能狂飙!Next.js 16 重磅发布:Turbopack 稳定、编译提速 10 倍!🚀🚀🚀
前端·javascript·后端
软件技术NINI2 小时前
html css js网页制作成品——HTML+CSS仙台有树电视剧网页设计(5页)附源码
javascript·css·html
DoraBigHead2 小时前
React Fiber:从“递归地狱”到“时间切片”的重生之路
前端·javascript·react.js
YUELEI1182 小时前
Vue 安装依赖的集合和小知识
javascript·vue.js·ecmascript