快捷導(dǎo)航

vue如何從后臺(tái)下載.zip壓縮包文件

更新時(shí)間：2022年09月22日 09:50:46 作者：sqwu

這篇文章主要介紹了vue如何從后臺(tái)下載.zip壓縮包文件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

1.添加下載按鈕

2.（原始方法，會(huì)出現(xiàn)亂碼）給按鈕添加點(diǎn)擊事件

添加接口代碼

 download: function() {
      const row = this.tableRadio
      // console.log(row)
      axios.get('/api/download', {
        params: {
          reportRuleId: row.reportRuleId
        }
        
      }).then(response => {
        console.log(response.data);
      }).catch(error => { this.$message.error(error) })
}

一直使用的是axios.get()這種請(qǐng)求方式，可以訪問(wèn)后臺(tái)，但是返回的是一堆亂碼

3.（更正版）用axios（{}）這種方式

配置參數(shù)：

根據(jù)返回的類型response.data.type，如果是文件流application/octet-stream則下載文件，如果是json則顯示錯(cuò)誤信息；
文件名來(lái)自http頭部的Content-Disposition字段；

axios({
        method: 'GET',
        url: '/api/download',
        params: {
          reportRuleId: row.reportRuleId
        },
        responseType: 'blob'
      }).then(response => {
       if (response.data.type === 'application/octet-stream') {
        // 獲取http頭部的文件名信息，若無(wú)需重命名文件，將下面這行刪去
        const fileName = response.headers['content-disposition'].split('=')[1]
        /* 兼容ie內(nèi)核，360瀏覽器的兼容模式 */
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          const blob = new Blob([response.data], { type: 'application/zip' })
          window.navigator.msSaveOrOpenBlob(blob, fileName)
        } else {
          /* 火狐谷歌的文件下載方式 */
          const blob = new Blob([response.data], { type: 'application/zip' })
          const url = window.URL.createObjectURL(blob)
          const link = document.createElement('a') // 創(chuàng)建a標(biāo)簽
          link.href = url
          link.download = fileName // 文件重命名，若無(wú)需重命名，將該行刪去
          link.click()
          URL.revokeObjectURL(url) // 釋放內(nèi)存
        }
        resolve(response)
      } else {
        const reader = new FileReader()
        reader.onload = function(event) {
          const msg = JSON.parse(reader.result).data
          _this.$errorMsg(message) // 將錯(cuò)誤信息顯示出來(lái)
        }
        reader.readAsText(response.data)
      }
      }).catch(error => _this.$errorMsg(error) )

這樣就可以成功下載到.zip文件

4.報(bào)跨域問(wèn)題

經(jīng)過(guò)排查，我這邊產(chǎn)生這個(gè)問(wèn)題的原因是參數(shù)格式，如下圖，我的參數(shù)存在一個(gè)JOSN字符串，導(dǎo)致報(bào)錯(cuò)

解決辦法：

使用qs模塊將params參數(shù)格式轉(zhuǎn)換一下，將下面這行代碼放在params后面

paramsSerializer: params => { return qs.stringify(params, { arrayFormat: 'brackets' }) }

type：'application/zip'可以更改下載文件的類型

具體有以下這些類型：

'doc'??????? => 'application/msword',
??? 'bin'??????? => 'application/octet-stream',
??? 'exe'??????? => 'application/octet-stream',
??? 'so'??????? => 'application/octet-stream',
??? 'dll'??????? => 'application/octet-stream',
??? 'pdf'??????? => 'application/pdf',
??? 'ai'??????? => 'application/postscript',
??? 'xls'??????? => 'application/vnd.ms-excel',
??? 'ppt'??????? => 'application/vnd.ms-powerpoint',
??? 'dir'??????? => 'application/x-director',
??? 'js'??????? => 'application/x-javascript',
??? 'swf'??????? => 'application/x-shockwave-flash',
??? 'xhtml'??????? => 'application/xhtml+xml',
??? 'xht'??????? => 'application/xhtml+xml',
??? 'zip'??????? => 'application/zip',
??? 'mid'??????? => 'audio/midi',
??? 'midi'??????? => 'audio/midi',
??? 'mp3'??????? => 'audio/mpeg',
??? 'rm'??????? => 'audio/x-pn-realaudio',
??? 'rpm'??????? => 'audio/x-pn-realaudio-plugin',
??? 'wav'??????? => 'audio/x-wav',
??? 'bmp'??????? => 'image/bmp',
??? 'gif'??????? => 'image/gif',
??? 'jpeg'??????? => 'image/jpeg',
??? 'jpg'??????? => 'image/jpeg',
??? 'png'??????? => 'image/png',
??? 'css'??????? => 'text/css',
??? 'html'??????? => 'text/html',
??? 'htm'??????? => 'text/html',
??? 'txt'??????? => 'text/plain',
??? 'xsl'??????? => 'text/xml',
??? 'xml'??????? => 'text/xml',
??? 'mpeg'??????? => 'video/mpeg',
??? 'mpg'??????? => 'video/mpeg',
??? 'avi'??????? => 'video/x-msvideo',
??? 'movie'??????? => 'video/x-sgi-movie',??

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: