欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2023年07月04日 10:10:42   作者：MXin5  
這篇文章主要給大家介紹了關(guān)于Vue使用new?Blob()實(shí)現(xiàn)不同類型的文件下載功能的相關(guān)資料,在Vue項(xiàng)目中,經(jīng)常用Blob二進(jìn)制進(jìn)行文件下載功能,需要的朋友可以參考下

前言

在 Vue 項(xiàng)目實(shí)際開發(fā)過程中，經(jīng)常需要對各種各樣的類型進(jìn)行下載，因?yàn)槲也皇乔岸顺錾?，就自己在網(wǎng)上學(xué)習(xí)最后使用到自己的項(xiàng)目當(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）
.xlsMicrosoft Excelapplication/vnd.ms-excel
.xlsxMicrosoft Excel (OpenXML)application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.csvCSVtext/csv
.docMicrosoft Wordapplication/msword
.docxMicrosoft Word (OpenXML)application/vnd.openxmlformats-officedocument.wordprocessingml.document
.pdfPDFapplication/pdf
.pptMicrosoft PowerPointapplication/vnd.ms-powerpoint
.pptxMicrosoft PowerPoint (OpenXML)application/vnd.openxmlformats-officedocument.presentationml.presentation
.png便攜式網(wǎng)絡(luò)圖形（PNG）image/png
.gifGIFimage/gif
.jpegJPEG 圖片image/jpeg
.jpgJPEG 圖片image/jpeg
.mp3MP3 音頻audio/mpeg
.aacAAC 音頻audio/aac
.html超文本標(biāo)記語言 (HTML)text/html
.cssCSStext/css
.jsJavaScripttext/javascript
.jsonJSON 格式application/json
.abwAbiWord 文檔application/x-abiword
.arc存檔文檔(多個文件嵌入)application/x-freearc
.aviAVI: 音頻視頻交錯video/x-msvideo
.azw亞馬遜Kindle電子書格式application/vnd.amazon.ebook
.bin任何類型的二進(jìn)制數(shù)據(jù)application/octet-stream
.bmpWindows OS/2位圖圖形image/bmp
.bzBZip 存檔application/x-bzip
.bz2BZip2 存檔application/x-bzip2
.cshC-Shell 腳本application/x-csh
.eotMS嵌入式OpenType字體application/vnd.ms-fontobject
.epub電子出版物(EPUB)application/epub+zip
.htm超文本標(biāo)記語言 (HTML)text/html
.icoIcon 格式image/vnd.microsoft.icon
.icsiCalendar 格式text/calendar
.jarJava Archive (JAR)application/java-archive
.jsonldJSON-LD 格式application/ld+json
.mid樂器數(shù)字接口(MIDI)audio/midi audio/x-midi
.midi樂器數(shù)字接口(MIDI)audio/midi audio/x-midi
.mjsJavaScript 模塊text/javascript
.mpegMPEG 視頻video/mpeg
.mpkg蘋果安裝程序包application/vnd.apple.installer+xml
.odpOpenDocument演示文檔application/vnd.oasis.opendocument.presentation
.odsOpenDocument 電子表格文件application/vnd.oasis.opendocument.spreadsheet
.odtOpenDocument 文本文檔application/vnd.oasis.opendocument.text
.ogaOGG 音頻audio/ogg
.ogvOGG 視頻video/ogg
.ogxOGGapplication/ogg
.otfOpenType 字體font/otf
.rarRAR 存檔application/x-rar-compressed
.rtf富文本格式 (RTF)application/rtf
.shBourne shell 腳本application/x-sh
.svg可縮放矢量圖形 (SVG)image/svg+xml
.swf小型web格式 (SWF) or Adobe Flash documentapplication/x-shockwave-flash
.tarTape 歸檔(TAR)application/x-tar
.tif標(biāo)記圖像文件格式 (TIFF)image/tiff
.tiffTagged Image File Format (TIFF)image/tiff
.ttfTrueType 字體font/ttf
.txtTexttext/plain
.vsdMicrosoft Visioapplication/vnd.visio
.wav波形音頻格式audio/wav
.webaWEBM 音頻audio/webm
.webmWEBM 視頻video/webm
.webpWEBP 圖片image/webp
.woff網(wǎng)頁開放字體格式 (WOFF)font/woff
.woff2網(wǎng)頁開放字體格式 (WOFF)font/woff2
.xhtmlXHTMLapplication/xhtml+xml
.xmlXMLapplication/xml（普通用戶不可讀）、text/xml（普通用戶可
.xulXULapplication/vnd.mozilla.xul+xml
.zipZIPapplication/zip
.3gp3GPP audio/video 容器video/3gpp、audio/3gpp（不含視頻）
.3g23GPP2 audio/video 容器video/3gpp2、audio/3gpp2（不含視頻）
.7z7-zipapplication/x-7z-compressed

代碼實(shí)現(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)">點(diǎn)擊下載
                </el-button>

JavaScript

項(xiàng)目中后端返回的是文件上傳成功生成的一個字符串，為了保證可以下載所有文件，需要對后綴進(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)頭中的信息比如

直接使用

res.headers["XXX"];進(jìn)行獲取即可。

這樣就可以實(shí)現(xiàn)各種類型的文件的下載了，很巴適。

總結(jié)

到此這篇關(guān)于Vue使用new Blob()實(shí)現(xiàn)不同類型的文件下載功能的文章就介紹到這了,更多相關(guān)Vue文件下載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論