后端在做这种导出文件接口时,可能会两种请求方式,如果是get请求,直接将接口拼接好请求参数后在浏览器打开即可,如果是post请求,就需要在发送请求时,加上responseType:'blob'

结合代码:

这是接口文件,注意一定要加上responseType:'blob'这句

// 二维码列表 导出接口
export const getQrcodeListExport = (data: any) =>
  request.post(`${SECONDARY_API}/qrCode/stat/codeList`, {
    ...data,
  }, {
    headers: {
      'content-type': 'application/json; charset=UTF-8'
    },
    responseType: 'blob'//一定要加!!
  });

这里是页面文件,写在点击下载按钮内的方法,在此处调用接口,注意这个type: 'text/csv;;charset=UTF-8',这句其实并不是绝对的,取决于接口的响应标头中的content-type值

try {
        const res: any = await getQrcodeListExport({
          ...analysisConfig,
          export: 1
        });
        const blob = new Blob([res], { type: 'text/csv;;charset=UTF-8' });
        const fileName = `自定义文件名_${fromDate}至${toDate}`;
        downloadExcel(blob, fileName);
      } catch (err: any) {
        err.msg && message.error(err.msg);
      }

content-type值:直接贴过去就ok

由于这个项目中这种导出文件的功能非常多,几乎一半以上的页面都有,所以将上面的下载功能封装为了一个叫做downloadExcel()的方法,放在了utils文件夹中,需要使用时直接导入,上面是页面引入后直接调用的

这里是封装的方法

/**
 * excel文件下载
 *
 * @public
 * @param {Blob} blob 文件对象
 * @param {string} fileName 文件名
 * @returns {void}
 */
export const downloadExcel = (blob: Blob, fileName: string) => {
  const a = document.createElement('a');
  a.download = fileName;
  a.href = URL.createObjectURL(blob);
  a.style.display = 'none';
  document.body.appendChild(a);
  a.click();
  URL.revokeObjectURL(a.href);
  document.body.removeChild(a);
};

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐