快捷導(dǎo)航

Vue使用new?Blob()實現(xiàn)不同類型的文件下載功能

更新時間：2023年07月04日 10:10:42 作者：MXin5

這篇文章主要給大家介紹了關(guān)于Vue使用new?Blob()實現(xiàn)不同類型的文件下載功能的相關(guān)資料,在Vue項目中,經(jīng)常用Blob二進(jìn)制進(jìn)行文件下載功能,需要的朋友可以參考下

前言

在 Vue 項目實際開發(fā)過程中，經(jīng)常需要對各種各樣的類型進(jìn)行下載，因為我不是前端出生，就自己在網(wǎng)上學(xué)習(xí)最后使用到自己的項目當(dāng)中，代碼冗余等低級錯誤還請多多指導(dǎo)。我發(fā)現(xiàn)用 Blob 二進(jìn)制進(jìn)行文件下載的比較多，我就采用了這一方式。

下面是一份 Blob 的配置關(guān)系對應(yīng)表，在我們使用Blob做下載功能時，根據(jù)需要下載的文件類型修改 type 值進(jìn)行下載即可。

文件后綴名、文件類型、mimeType值對應(yīng)關(guān)系表后綴名

后綴名	文件類型	類型（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	便攜式網(wǎng)絡(luò)圖形（PNG）	image/png
.gif	GIF	image/gif
.jpeg	JPEG 圖片	image/jpeg
.jpg	JPEG 圖片	image/jpeg
.mp3	MP3 音頻	audio/mpeg
.aac	AAC 音頻	audio/aac
.html	超文本標(biāo)記語言 (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	任何類型的二進(jìn)制數(shù)據(jù)	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	超文本標(biāo)記語言 (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	樂器數(shù)字接口(MIDI)	audio/midi audio/x-midi
.midi	樂器數(shù)字接口(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	標(biāo)記圖像文件格式 (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	網(wǎng)頁開放字體格式 (WOFF)	font/woff
.woff2	網(wǎng)頁開放字體格式 (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

代碼實現(xiàn)

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

項目中后端返回的是文件上傳成功生成的一個字符串，為了保證可以下載所有文件，需要對后綴進(jìn)行截取進(jìn)行判斷然后取不同的new Blob，這里new Blob中后端直接返回的是文件流，所以直接用res進(jìn)行獲取

downloadExample(assetNo,downloadAddress){
       axios({
            method: "get",
            url: '/dev-api/directory/io/exportdemo?assetNo=' + assetNo + '&fileNo=' + downloadAddress,
            data: "",
            responseType: "blob", // 指定響應(yīng)類型為二進(jìn)制數(shù)據(jù)
          }).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");   // 創(chuàng)建一個<a>標(biāo)簽
      elink.style.display = "none";                       // 隱藏標(biāo)簽
      elink.href = window.URL.createObjectURL(blob);      // 配置href
      // 獲取后端返回的響應(yīng)頭中的名稱
      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 對象(彈出框進(jìn)行下載)
      document.body.removeChild(elink);  // 移除<a>標(biāo)簽
    },

拓展:如果想獲取響應(yīng)頭中的信息比如