前端vue?a鏈接下載文件失敗的問題(未發(fā)現(xiàn)文件)

更新時間：2022年09月15日 15:03:09 作者：偷魚小能手

這篇文章主要介紹了前端vue?a鏈接下載文件失敗的問題(未發(fā)現(xiàn)文件)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

前端vue a鏈接下載文件失敗(未發(fā)現(xiàn)文件)

錯誤案例

發(fā)現(xiàn)出現(xiàn)錯誤后，我們?nèi)ハ螺d內(nèi)容里面看我們下載這個文件的地址

ps：ctrl + j 打開下載內(nèi)容的快捷鍵適用于 windows系統(tǒng)

可以發(fā)現(xiàn)這個文件夾路徑不對識別不了

我把路徑寫在根目錄下面了 src/assets/... ,應(yīng)該把你需要下載的文件放在跟src同級的目錄下或者放在publice目錄里面，反正就是跟 favicon.ico、index.html 這兩個文件同級就好了

之后就點(diǎn)擊下載你如果不放心的話可以在控制臺打印你的那個地址，把它放在地址欄里面看能否下載下來

完整代碼

html：

 <el-button type="primary" @click="exportBtn">導(dǎo)出模板</el-button>

js：

    // 導(dǎo)出模板
    exportBtn() {
      let link = document.createElement('a');
      link.setAttribute("download", "");
      link.href = "./政策模板導(dǎo)出.xlsx"; // 你本地資源文件的存放地址
      console.log('href:',link.href);
      link.click();
    },

vue點(diǎn)擊下載的避坑指南

引入

今天寫項(xiàng)目時看到一個導(dǎo)出功能，看了后端給的接口數(shù)據(jù)發(fā)現(xiàn)跟我想的不太一樣。他給的數(shù)據(jù)亂碼狀，而且直接訪問接口URL會下載文件本體，我就打算直接a標(biāo)簽下載文件，然而并不行。

避坑之路

查了資料得到了一種寫法，

putOut () {
  const link = document.createElement('a')
  // 創(chuàng)建一個a標(biāo)簽
  link.style.display = 'none'
    //   // 將a標(biāo)簽隱藏
  link.href = '3*.***.***.*4:****' + '/***/export'
    //   // 給a標(biāo)簽添加下載鏈接  "域名+接口"  safe是一個動態(tài)的域名  后面的接口替換成你自己的下載接口
  link.setAttribute('download', '導(dǎo)出.xlsx')
    //   // 此處注意，要給a標(biāo)簽添加一個download屬性，屬性值就是文件名稱 否則下載出來的文件是沒有屬性的，空白白
  document.body.appendChild(link)
    //   // 將上面創(chuàng)建的a標(biāo)簽加入到body的尾部
  ink.click()
    //   // 執(zhí)行a標(biāo)簽
 },

這樣寫的話確實(shí)可以下載文件，但是會出現(xiàn)文件內(nèi)容與后綴名不匹配，文件無法打開的問題。

進(jìn)一步搜了這個問題得知，這個與接口給的信息有關(guān)，和格式也有關(guān)?；谶@一點(diǎn)，又寫了一個方法如下：

putOut () {
      var url = '3*.*.*.*4:*/*/export?response-content-type=application/octet-stream'
      var xhr = new XMLHttpRequest()
      xhr.open('get', url, true)
      xhr.responseType = 'blob' // 返回類型blob
      xhr.onload = function () {
        console.log(this)
        if (this.status === 200) {
          var blob = this.response
          var reader = new FileReader()
          reader.readAsDataURL(blob) // 轉(zhuǎn)換為base64
          reader.onload = function (e) {
            var a = document.createElement('a')
            a.style.display = 'none'
            a.download = '用戶信息.xlsx'
            a.href = e.target.result
            document.body.append(a)
            a.click()
          }
        }
      }
      xhr.send()
    },

這里用到了blob類型，我也是第一次見到，先引用一下這個數(shù)據(jù)類型的介紹

JavaScript中有一獨(dú)特的專門存放二進(jìn)制數(shù)據(jù)的數(shù)據(jù)類型對象.叫blob,是從HTML5引入的。blob的英文多稱為Binary Large gbiect、即二進(jìn)制的大型對象。

File對象繼承自blob對象,并有一些額外的拓展功能。

blob對象

創(chuàng)建方法

利用構(gòu)造函數(shù)Blob(array, options)

array:必需，數(shù)組類型，其中數(shù)組元素是二進(jìn)制對象或者字符串;
options:可選，對二進(jìn)制數(shù)據(jù)的MIME類型說明，包含兩個屬性, type和endings;

slice(start[, end[, contentType ]]])

從一個源blob對象生成一個新blob對象，包含了源blob對象中指定范圍的數(shù)據(jù)，以字節(jié)為單位。start:數(shù)據(jù)起始位置，默認(rèn)為0;

end:數(shù)據(jù)結(jié)束位置，默認(rèn)為blob對象的size屬性;
contentType:規(guī)定新的blob對象的MIME類型，即給type屬性傳入該值;

屬性（都是可讀)

size:返回當(dāng)前對象的字節(jié)長度;type:返回?cái)?shù)據(jù)的MIME類型;

應(yīng)用場景

大文件分段上傳

將大文件用slice()方法切割成段，分段上傳;

通過URL下載文件

創(chuàng)建標(biāo)簽元素，將文件內(nèi)容用blob構(gòu)造函數(shù)創(chuàng)建為blob對象;

用window對象的屬性URL對象的方法createObjectURL()，傳入剛剛創(chuàng)建的blob對象，返回一個DOMString對象，賦予標(biāo)簽元素的href屬性。

設(shè)置標(biāo)簽的download屬性為下載文件的文件名(加文件擴(kuò)展名）。點(diǎn)擊標(biāo)簽即可下載;

由此，進(jìn)一步重寫完成功能，結(jié)合接口信息，代碼變成了這個樣子

 putOut () {
      this.$axios({
        method: 'get',
        url: '/admin/export',
        // 注意配置響應(yīng)方式 responseType: 'blob'
        responseType: 'blob'
      }).then((res) => {
        console.log(res.data)
        const blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
        console.log(blob)
        var fileName = '用戶信息.xlsx'
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
        link.setAttribute('download', fileName)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      }).catch(error => {
        this.$message.error('下載失敗')
        console.log(error)
      })
    },

至此，功能成功實(shí)現(xiàn)。