前言
在使用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