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

相关推荐
江城开朗的豌豆2 小时前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js
江城开朗的豌豆3 小时前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js
Asort3 小时前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript
EMT3 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
艾小码3 小时前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
前端康师傅4 小时前
JavaScript 作用域常见问题及解决方案
前端·javascript
我是日安4 小时前
从零到一打造 Vue3 响应式系统 Day 9 - Effect:调度器实现与应用
前端·vue.js
Mintopia4 小时前
🚀 Next.js 全栈 E2E 测试:Playwright vs Cypress
前端·javascript·next.js
原生高钙4 小时前
JS设计模式指南
前端·javascript
Mintopia4 小时前
⚡ WebAssembly 如何加速 AIGC 模型在浏览器中的运行效率?
前端·javascript·aigc