之前使用axios下载一直是好好的,知道产品提出,下载的错误信息需要提示出来而不是显示在下载文件里面。

在网上搜索良久,也没有答案没办法,只能去这里找https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/text查找文档。

 

废话少数,直接把代码贴出来

 Vue.axios({
      method: 'post',
      url: param.url,
      data: param.body,
      headers: param.headers || {responseType: 'blob'},
      responseType: 'blob'
    }).then(async res => {
      // 导出错误模板提示
      if (res.data.type === 'application/json') {
        const text = await res.data.text()
        const jsonText = await JSON.parse(text)
        resolve(jsonText)
      } else {
        const success = {
          status: 200
        }
        let fileName = ``
        const content = res.data
        if (res.headers) {
          fileName = decodeURI(decodeURI(res.headers['content-disposition'])).split('filename=')[1]
        }
        if (!fileName) {
          fileName = `${Vue.$moment().format('YYYYMMDDhhmm')}.xls`
        }
        const blob = new Blob([content], {
          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
        })
        if ('download' in document.createElement('a')) {
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href)
          document.body.removeChild(elink)
        } else {
          navigator.msSaveBlob(blob, fileName)
        }
        resolve(success)
      }

起作用的就是这段代码。

把返回来的流文件解析为json。

正确时直接下载模板。错误时判断返回类型,转换json。

注意是一个异步方法 使用 async await处理就好

Logo

前往低代码交流专区

更多推荐