下载二进制文件

今天遇到一个坑，前端带参数向后台发送请求，后台根据参数返回一个文件，这个文件是二进制格式，根据调研得知，最好是使用原生对象XHRHttpRequest来下载文件，避免出现文件解压失败的情况，好了，然后就去网上找相关代码来实现，先贴上一个实验通过的代码.

// A code block
const val={}
const address = `xxx`;
const data = JSON.stringify(val);
const oAjax = new XMLHttpRequest();
    oAjax.responseType = 'blob'
    oAjax.open('POST', address, true);
    oAjax.setRequestHeader("Content-type", "application/json;charset=UTF-8");
    oAjax.onreadystatechange = () =>{
      if (oAjax.readyState === 4 && oAjax.status === 200) {
        const type = oAjax.getResponseHeader('Content-Type')
        const blob = new Blob([oAjax.response], {type})
        const fileName = oAjax.getResponseHeader('Content-Disposition').split('filename=')[1];
        if (typeof window.navigator.msSaveBlob !== 'undefined') {   
          window.navigator.msSaveBlob(blob, fileName)
        } else {
          const URL = window.URL || window.webkitURL
          const objectUrl = URL.createObjectURL(blob)
          if (fileName) {
            const a = document.createElement('a')
            // safari doesn't support this yet
            if (typeof a.download === 'undefined') {
              window.location = objectUrl
            } else {
              a.href = objectUrl
              a.download = fileName
              document.body.appendChild(a)
              a.click()
              a.remove()
            }
          } else {
            window.location = objectUrl
          }
        }
      } 
    };
    oAjax.send(data);

这里说一下几个强调的点：

data = JSON.stringify(val) 参数需要先转换一下格式，要不然后台会报400-格式错误
oAjax.responseType = ‘blob’ 如果后台返回的是一个二进制流，那么就一定要写上这个返回格式，
response: Blob(11295) {size: 11295, type: “application/octet-stream”}
responseType: “blob”
responseURL: “xxx”
可以看下console.log(oAjax)，这里response必须是正确的格式，如果response返回的内容是乱码，那么会导致文件解析出错，文件可能会打不开或者解压出错
第三点和第二点相关 oAjax.open(‘POST’, address, true); 这一句代码中的第三个参数，必须要写true，不然会导致第二点出错
第四个点，有点无关紧要，就是以上代码使用的时候必须全部复制，不能只截取部分，不然会出错

参考链接：
https://blog.csdn.net/qq_32247819/article/details/79270788
https://blog.csdn.net/aydongzhiping/article/details/82462473

猜你喜欢