Vue中使用Blob下载不同文件

一、问题引入

Vue项目中，前端下载文件，后台返回的是二进制文件流（blob），前端处理下载不同类型的文件

二、下载方法

说明：使用js原生方式请求ajax进行下载亦可实现，请看本博客其他内容：原生js实现后端返回文件流Blob，前端下载文件 - 盼星星盼太阳 - 博客园 (cnblogs.com)

上述方法面对不同类型文件，多种下载场景时会产生大量冗余代码，思考后决定封装blob下载方法

使用axios请求，需要设置responseType: 'blob'

1.页面html

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

2.请求方法

项目中后端返回的是文件上传成功生成的一个字符串，为了保证可以下载所有文件，需要对后缀进行截取进行判断然后取不同的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.setAttribute('download',newFilename);
      elink.click();
      URL.revokeObjectURL(elink.href);   // 释放URL 对象(弹出框进行下载)
      document.body.removeChild(elink);  // 移除<a>标签
    },

拓展：如果想获取响应头中的信息，直接使用res.headers["XXX"]进行获取即可。

注意：获取文件名 res.headers["content-disposition"] ，需要同源或者配置Access-Control-Expose-Headers响应头。

具体请看本博客相关内容 axios 获取服务端自定义设置的响应头问题 - 盼星星盼太阳 - 博客园 (cnblogs.com)

三、不同文件类型对应不同Blob Type

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

后缀名         文件类型 类型（type）
.xls Microsoft Excel application/vnd.ms-excel
.xlsx Microsoft Excel (OpenXML) application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.csv CSV text/csv
.doc Microsoft Word application/msword
.docx Microsoft Word (OpenXML) application/vnd.openxmlformats-officedocument.wordprocessingml.document
.pdf PDF application/pdf
.ppt Microsoft PowerPoint application/vnd.ms-powerpoint
.pptx Microsoft PowerPoint (OpenXML) application/vnd.openxmlformats-officedocument.presentationml.presentation
.png 便携式网络图形（PNG） image/png
.gif GIF image/gif
.jpeg JPEG 图片 image/jpeg
.jpg JPEG 图片 image/jpeg
.mp3 MP3 音频 audio/mpeg
.aac AAC 音频 audio/aac
.html 超文本标记语言 (HTML) text/html
.css CSS text/css
.js JavaScript text/javascript
.json JSON 格式 application/json
.abw AbiWord 文档 application/x-abiword
.arc 存档文档(多个文件嵌入) application/x-freearc
.avi AVI: 音频视频交错 video/x-msvideo
.azw 亚马逊Kindle电子书格式 application/vnd.amazon.ebook
.bin 任何类型的二进制数据 application/octet-stream
.bmp Windows OS/2位图图形 image/bmp
.bz BZip 存档 application/x-bzip
.bz2 BZip2 存档 application/x-bzip2
.csh C-Shell 脚本 application/x-csh
.eot MS嵌入式OpenType字体 application/vnd.ms-fontobject
.epub 电子出版物(EPUB) application/epub+zip
.htm 超文本标记语言 (HTML) text/html
.ico Icon 格式 image/vnd.microsoft.icon
.ics iCalendar 格式 text/calendar
.jar Java Archive (JAR) application/java-archive
.jsonld JSON-LD 格式 application/ld+json
.mid 乐器数字接口(MIDI) audio/midi audio/x-midi
.midi 乐器数字接口(MIDI) audio/midi audio/x-midi
.mjs JavaScript 模块 text/javascript
.mpeg MPEG 视频 video/mpeg
.mpkg 苹果安装程序包 application/vnd.apple.installer+xml
.odp OpenDocument演示文档 application/vnd.oasis.opendocument.presentation
.ods OpenDocument 电子表格文件 application/vnd.oasis.opendocument.spreadsheet
.odt OpenDocument 文本文档 application/vnd.oasis.opendocument.text
.oga OGG 音频 audio/ogg
.ogv OGG 视频 video/ogg
.ogx OGG application/ogg
.otf OpenType 字体 font/otf
.rar RAR 存档 application/x-rar-compressed
.rtf 富文本格式 (RTF) application/rtf
.sh Bourne shell 脚本 application/x-sh
.svg 可缩放矢量图形 (SVG) image/svg+xml
.swf 小型web格式 (SWF) or Adobe Flash document application/x-shockwave-flash
.tar Tape 归档(TAR) application/x-tar
.tif 标记图像文件格式 (TIFF) image/tiff
.tiff Tagged Image File Format (TIFF) image/tiff
.ttf TrueType 字体 font/ttf
.txt Text text/plain
.vsd Microsoft Visio application/vnd.visio
.wav 波形音频格式 audio/wav
.weba WEBM 音频 audio/webm
.webm WEBM 视频 video/webm
.webp WEBP 图片 image/webp
.woff 网页开放字体格式 (WOFF) font/woff
.woff2 网页开放字体格式 (WOFF) font/woff2
.xhtml XHTML application/xhtml+xml
.xml XML application/xml（普通用户不可读）、text/xml（普通用户可
.xul XUL application/vnd.mozilla.xul+xml
.zip ZIP application/zip
.3gp 3GPP audio/video 容器 video/3gpp、audio/3gpp（不含视频）
.3g2 3GPP2 audio/video 容器 video/3gpp2、audio/3gpp2（不含视频）
.7z 7-zip application/x-7z-compressed
posted @ 2023-07-27 17:19  盼星星盼太阳  阅读(1398)  评论(0)    收藏  举报