前端文件下载,后端返回文件流方式,兼容ie浏览器

// 文件下载,后端返回文件流方式,兼容ie浏览器
const fileDownload = (fileName, params) => {
  showLoading();//出现load动画
  Api.get(xxxfiledownloadurl, {
    params,
    responseType: 'blob',
    headers: {
      isShowLoading: false, // 不要全局loading,使用自定义的loading,需要在封装的Api拦截方法中设置一下,略...
    }
  })
    .then(res => {
      const data = res.data;
      let content;
      let reader = new FileReader();
      reader.onload = event => {
        content = reader.result;
        try {
          const obj = JSON.parse(content);
          if (obj && obj.code && obj.message) { // 因为blob返回的错误catch接收不了,只能使用FileReader读取再做出提示
            return alert(`${obj.code}-${obj.message}`);
          }
          else if (window.navigator && window.navigator.msSaveBlob) {
            // 兼容ie浏览器
            return window.navigator.msSaveBlob(data, fileName);
          }
          else {
            reader.readAsDataURL(data);
          }
        }
        catch (err) {
          return saveAs(data, fileName)
        }
      }
      reader.saveAsText(data)
    }).catch(err => {
      // 正常的接收到的错误提示--根据打印的内容筛选出需要进行错误的提示内容,略...
      console.log(Object.values(err));
    })
    .finally(() => {
      hideLoading();//隐藏load动画
    })
}

// 注意: 如果是post请求:
Api.post(xxxfiledownloadurl, params对象, {
    responseType: 'blob',
    headers: {
      isShowLoading: false, // 不要全局loading,使用自定义的loading,需要在封装的Api拦截方法中设置一下,略...
    }
})
.then(res=>{略...}).catch(err=>{略...});

你可能感兴趣的:(JavaScript面试问题,文件下载或者文件上传,文件下载)