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"v-if="formDetail.downloadAddress!=null"@click="downloadExample(formDetail.assetNo,formDetail.downloadAddress)">点击下载</el-button>

JavaScript

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

downloadExample(assetNo,downloadAddress){downloadExample(assetNo,downloadAddress).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){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;newFilename = decodeURIComponent(newFilename);elink.download = newFilename;elink.click();URL.revokeObjectURL(elink.href);   // 释放URL 对象document.body.removeChild(elink);  // 移除<a>标签},

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