axios 处理下载文件 responseType: “blob“, //注意,下载报错转成json

最新推荐文章于 2024-07-29 13:47:29 发布

给你取暖

最新推荐文章于 2024-07-29 13:47:29 发布

阅读量751

点赞数

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/weixin_49409651/article/details/130840273

版权

这段代码展示了如何处理一个异步下载任务，通过fetchAPI获取数据，根据响应类型解析JSON或触发文件下载。在onloadend事件中判断数据类型，如果能解析为JSON则处理错误信息，否则使用FileReader读取并创建Blob进行文件下载。对于不同浏览器的兼容性问题，代码也提供了相应的解决方案。

摘要由CSDN通过智能技术生成

   try {
      setLoading(true);
      const res = await fetchDownloadCallRecord({
        taskNo,
        callIds,	
      });
      console.log('res', res);
      const { data } = res;

      let r = new FileReader();

      r.onloadend = function (e) {
        // 如果JSON.parse(this.result)不报错，说明this.result是json对象，则弹框提示
        // 如果JSON.parse(this.result)报错，说明返回的是文件流，进入catch，下载文件

        try {
          const obj = JSON.parse(e.target.result);
          // console.log('obj', obj);
          const { message: res_msg, code: res_code } = obj;
          if (res_code && Number(res_code) !== 0) {
            message.error(res_msg || '下载失败！');
            return;
          }
        } catch (e) {
          // console.log('obj-error -catch', e);
          downloadFn(data);
        }
      };
      r.onerror = (e) => {
        // console.log('obj-onerror', e);
        downloadFn(data);
      };
      r.readAsText(data); // FileReader的API
      function downloadFn(data) {
        const fileName = '录音+文本 ' + dayjs().format('YYYY-MM-DD HH:mm:ss');
        //ie内核的浏览器下
        if (navigator.userAgent.match(/MSIE\s([\d.]+)/) || navigator.userAgent.indexOf('Trident') > -1) {
          window.navigator.msSaveBlob(data, fileName);
        } else {
          const blob = new Blob([data], { type: 'application/zip' }); //设置下载的内容以及格式
          const url = window.URL.createObjectURL(blob); //设置路径
          const link = window.document.createElement('a'); // 创建a标签
          link.href = url;
          // let filename = res.headers['content-disposition']
          //   .split(';')[1]
          //   .split('filename=')[1]
          // let decodedURL = decodeURIComponent(filename); //解码，返回的是文件流所以我从res.header里面拿的文件名，但是是编码后的%E4巴拉巴拉的，所以拿来用的话要在前端解码
          link.download = fileName; //设置文件名
          link.style.display = 'none';
          link.click();
          URL.revokeObjectURL(url);
        }
      }
    } catch (e) {
      console.log('onDownloadClick---e', e);
      message.error('下载失败！');
    } finally {
      setLoading(false);
    }
  };

export const fetch= (params: any) => {
  return axios({
    url:  “url”
    method: "GET",
    params: params,
    responseType: "blob", //注意
    headers: {
      //注意
      "Content-Type": "application/json; application/octet-stream",
    },
  });
};