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

   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",
    },
  });
};

你可能感兴趣的:(前端,vue.js)