快捷導(dǎo)航

vue中下載文件后無(wú)法打開(kāi)的坑及解決

更新時(shí)間：2024年02月28日 08:38:54 作者：像牛奶卻不是牛奶

這篇文章主要介紹了vue中下載文件后無(wú)法打開(kāi)的坑及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue下載文件后無(wú)法打開(kāi)

今天在項(xiàng)目開(kāi)發(fā)的時(shí)候臨時(shí)要添加個(gè)導(dǎo)出功能我就寫(xiě)了一份請(qǐng)求加導(dǎo)出得代碼

代碼：

    //導(dǎo)出按鈕放開(kāi)
    exportDutySummarizing (dataRangeInfo) {
      const params = {
        departmentName: dataRangeInfo.name,
        departmentQode: dataRangeInfo.qode
      }
        //拼接所需得url
      const baseUrl = Constants.SERVICES.duty + Constants.DUTY_SUMMARIZING_EXPORT
      this.$axios({
        method: 'POST',
        url: utils.strFormat(baseUrl, {
          departmentName: params.departmentName,
          departmentQode: params.departmentQode
        }),
        headers: {
          Authorization: 'bearer ' + Cookies.get('Access-Token'),//token
          'Content-Type': 'application/json'
        },
        responseType: 'blob',//類(lèi)型 這個(gè)必須要
        data: {//參數(shù)
          a: '1'
        }
      })
        .then((response) => {
            //公共的下載方法 在下面展示
          utils.download(response, dataRangeInfo.name + '名字.xlsx')
        })
        .catch(() => { })
    }
    //公共的下載方法
    util.download = function (data, filename) {
      if (!data && !filename) {
        return
      }
      let url = window.URL.createObjectURL(new Blob([data]))
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', filename)
      document.body.appendChild(link)
      link.click()
    }

到這里請(qǐng)求文件流和導(dǎo)出文件得方法都已經(jīng)寫(xiě)完了，這里面有的坑呢打開(kāi)就是返回得數(shù)據(jù)，大概就是你new Blob([data])得時(shí)候這個(gè)data是否是文件流，這個(gè)例子后端直接給我返回了文件流所以就直接使用了一邊都是res.data這樣使用，再有就是responseType: 'blob',這個(gè)在請(qǐng)求文件流時(shí)請(qǐng)求頭中必須要寫(xiě)，其他就沒(méi)什么了。

如果到這里下載下來(lái)的文件還是無(wú)法打開(kāi)請(qǐng)往下看