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一蓑烟雨任平生1 小时前
Vue3 依赖注入(provide 和 inject)
vue.js·inject·provide·vue3 依赖注入·跨级别组件通信
孤狼warrior2 小时前
爬虫进阶 JS逆向基础超详细,解锁加密数据
javascript·爬虫
前端炒粉2 小时前
18.矩阵置零(原地算法)
javascript·线性代数·算法·矩阵
listhi5202 小时前
利用React Hooks简化状态管理
前端·javascript·react.js
paopaokaka_luck2 小时前
基于SpringBoot+Vue的助农扶贫平台(AI问答、WebSocket实时聊天、快递物流API、协同过滤算法、Echarts图形化分析、分享链接到微博)
java·vue.js·spring boot·后端·websocket·spring
华仔啊3 小时前
这个Vue3旋转菜单组件让项目颜值提升200%!支持多种主题,拿来即用
前端·javascript·css
Sheldon一蓑烟雨任平生4 小时前
Vue3 重构待办事项(主要练习组件化)
vue.js·重构·vue3·组件化练习
CsharpDev-奶豆哥4 小时前
JavaScript性能优化实战大纲
开发语言·javascript·性能优化
yume_sibai7 小时前
TS 常用内置方法
前端·javascript·typescript
新知图书7 小时前
ArkTS语言、基本组成与数据类型
前端·javascript·typescript