vue3实现文件下载

韭菜盖饭2024-08-20 15:00

前言

在使用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.data为undefined的现象

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