解决:下载文件时axios配置responseType: 'blob'判断下载是否成功(避免后台返回失败标识时依然下载undefined文件)

描述:当下载文件时,axios配置responseType: ‘blob’,此时后台返回的数据会被强制转为blob类型;如果后台返回代表失败的data,前端也无法得知,依然会下载得到名为undefined的文件。

解决:将blob转回json格式,通过code判断是否下载成功

主要技术点:FileReader

axios配置:
axios({
	method: ‘post’,
    baseURL: ‘’,
    url: ‘’l,
    timeout: 3000,
    headers: {},
    data: options.method.toLowerCase() !== 'get' ? options.data : undefined,
    responseType: 'blob'
}).then(
       res => {
         const data = res.data
         // 有可能下载失败,返回{code: '500'},但responseType: 'blob'会把data强制转为blob,导致下载undefined.excel
         // 解决:将已转为blob类型的data转回json格式,判断是否下载成功
         let r = new FileReader()
         r.onload = function () {
           // 如果JSON.parse(this.result)不报错,说明this.result是json字符串,是下载报错情况的返回值,弹框提示
           // 如果JSON.parse(this.result)报错,说明下载成功,进入catch
           try {
             let resData = JSON.parse(this.result) // this.result为FileReader获取blob数据转换为json后的数据,即后台返回的原始数据
             if (resData && resData['code'] && resData['code'] === '500') {
               alert(‘下载失败’)
             }
           } catch (err) {
             let fileName = res.headers['content-disposition']
             // 获取文件名
             if (fileName && fileName.length >= 2) {
               fileName = fileName.split('=')[1]
             }
             fileName = decodeURIComponent(fileName)
             // 兼容ie11
             if (window.navigator.msSaveOrOpenBlob) {
               try {
                 const blobObject = new Blob([data])
                 window.navigator.msSaveOrOpenBlob(blobObject, fileName)
               } catch (e) {
                 console.log(e)
               }
               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()
             resolve(fileName)
           }
         }
         r.readAsText(data) // FileReader的API
       }).catch(res => {
         console.log(res)
      })

你可能感兴趣的:(js语法)