美文网首页前端秃头党
axios 设置的responseType 为blob下载文件,

axios 设置的responseType 为blob下载文件,

作者: 有你有团 | 来源:发表于2021-07-08 18:07 被阅读0次

    使用axios的responseType设置为blob下载文件

    • 成功时
    // 兼容ie
    if(window.naviagtor.msSaveBlob){
      try{
        const blobData = new Blob([res.data])
        window.navigator.msSaveBlob(blobData,'文件名')
      }catch(e){
        console.log('下载文件失败')
      }
    }else{
      const url = window.URL.createobjectURL(res.data)
      const link = document.createElement('a')
      link.href = url
      link.download = '文件名'
      link.click()
      URL.revokeobjectURL(url)
    }
    
    • 失败时
      当下载文件失败,后端返回json格式,但是在响应体里面无法获取响应体,此时就需要将blob转换为json
      主要使用FileReader构造函数
      **FileReader** 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 FileBlob 对象指定要读取的文件或数据。

    FileReader

    const reader = new FileReader()
    reader.onload = (event) => {
      const result = JSON.parse(event.target.result)
      // 此时可以根据后端相应数据进行提示
    }
    

    注意点

    如果使用 FileReader 将blob转换为必须等待响应体返回 type:'application/json',注意ie浏览器中返回的type类型,带有charset=utf-8 ,可以优先使用type进行判断,如果type 包含application/json,就进行错误处理

    完整代码

    function downloadFile(id){
      axios.post('/file',{fileId:id}).then(res => {
        if(res.data.type.indexOf('application/json') > -1){
          const reader = new FileReader()
          reader.onload = (event) => {
          const result = JSON.parse(event.target.result)
          // 此时可以根据后端相应数据进行提示
          }
        }else{
          if(window.naviagtor.msSaveBlob){
            try{
              const blobData = new Blob([res.data])
              window.navigator.msSaveBlob(blobData,'文件名')
            }catch(e){
              console.log('下载文件失败')
            }
          }else{
            const url = window.URL.createobjectURL(res.data)
            const link = document.createElement('a')
            link.href = url
            link.download = '文件名'
            link.click()
            URL.revokeobjectURL(url)
          }
        }
      })
    }
    

    相关文章

      网友评论

        本文标题:axios 设置的responseType 为blob下载文件,

        本文链接:https://www.haomeiwen.com/subject/cuutpltx.html