【前端】Vue之使用new Blob() 实现不同类型的文件下载

        在 Vue 项目实际开发过程中，经常需要对各种各样的类型进行下载，因为我不是前端出生，就自己在网上学习最后使用到自己的项目当中，代码冗余等低级错误还请多多指导。我发现用 Blob 二进制进行文件下载的比较多，我就采用了这一方式。

        下面是一份 Blob 的配置关系对应表，在我们使用Blob做下载功能时 ，根据需要下载的文件类型修改 type 值进行下载即可。

文件后缀名、文件类型、mimeType值对应关系表

代码实现

HTML

文件下载按钮，data中定义的我就没有写了哈，自己定义就好了。

<el-button icon="el-icon-search" v-model="formDetail.downloadAddress" :style="{width: '60%'}" class="underline"                        @click="downloadExample(formDetail.assetNo,formDetail.downloadAddress)">点击下载                </el-button>

JavaScript

        项目中后端返回的是文件上传成功生成的一个字符串，为了保证可以下载所有文件，需要对后缀进行截取进行判断然后取不同的new Blob，这里new Blob中后端直接返回的是文件流，所以直接用res进行获取

downloadExample(assetNo,downloadAddress){       axios({            method: "get",            url: '/dev-api/directory/io/exportdemo?assetNo=' + assetNo + '&fileNo=' + downloadAddress,            data: "",            responseType: "blob", // 指定响应类型为二进制数据          }).then((res) => {        // 下载格式为zip { type: "application/zip" }        let suffix = downloadAddress.substring(downloadAddress.lastIndexOf("."))        if (suffix=='.xls'){          let blob = new Blob([res], {type: "application/vnd.ms-excel"});          this.ways(blob,suffix);        }else if (suffix=='.xlsx'){          let blob = new Blob([res], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});          this.ways(blob,suffix);        }else if (suffix=='.doc'){          let blob = new Blob([res], {type: "application/msword"});          this.ways(blob,suffix);        }else if (suffix=='.docx'){          let blob = new Blob([res], {type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"});          this.ways(blob,suffix);        }else if (suffix=='.png'){          let blob = new Blob([res], {type: "pplication/pdf"});          this.ways(blob,suffix);        }else if (suffix=='.ppt'){          let blob = new Blob([res], {type: "application/vnd.ms-powerpoint"});          this.ways(blob,suffix);        }else if (suffix=='.png'){          let blob = new Blob([res], {type: "image/png"});          this.ways(blob)        }else if (suffix=='.pptx'){          let blob = new Blob([res], {type: "application/vnd.openxmlformats-officedocument.presentationml.presentation"});          this.ways(blob,suffix);        }else if (suffix=='.jpeg'){          let blob = new Blob([res], {type: "image/jpeg"});          this.ways(blob,suffix);        }else if (suffix=='.zip'){          let blob = new Blob([res], {type: "application/zip"});          this.ways(blob,suffix);        }else if (suffix=='.7z'){          let blob = new Blob([res], {type: "application/x-7z-compressed"});          this.ways(blob,suffix);        }else if (suffix=='tar'){          let blob = new Blob([res], {type: "application/x-tar"});          this.ways(blob,suffix);        }else if (suffix=='.7z'){          let blob = new Blob([res], {type: "application/x-7z-compressed"});          this.ways(blob,suffix);        }      })    },       ways(blob, suffix,res) {      let elink = document.createElement("a");   // 创建一个<a>标签      elink.style.display = "none";                       // 隐藏标签      elink.href = window.URL.createObjectURL(blob);      // 配置href      // 获取后端返回的响应头中的名称      let filename = res.headers["content-disposition"];       let newFilename = filename.split(';')[1].split('=')[1];      //自定义名称      // let newFilename = "样例文件" + new Date().getTime() + suffix; //自定义名字      // let newFilename = decodeURIComponent(res.headers["content-disposition"].split(';')[1].split('=')[1])      newFilename = decodeURIComponent(newFilename);      elink.download = newFilename;      elink.click();      URL.revokeObjectURL(elink.href);   // 释放URL 对象(弹出框进行下载)      document.body.removeChild(elink);  // 移除<a>标签    },

拓展:如果想获取响应头中的信息比如

直接使用

res.headers["XXX"];进行获取即可。

这样就可以实现各种类型的文件的下载了，很巴适。