react 从后端获取文件流导出

zlzbt

已于 2024-09-05 19:00:51 修改

阅读量160

点赞数 1

文章标签： javascript 前端开发语言

于 2024-08-30 12:25:11 首次发布

本文链接：https://blog.csdn.net/zlzbt/article/details/141714893

版权

//掉用后端接口 获取文件数据 POST 请求
export function exportGetFile(url: string, data: any) {
  return executeAndTryCatch(() =>
    request<Record<string, any>>(url, {
      method: 'GET',
      params: data,
      responseType: 'blob',
      getResponse: true, // 用来获取后端返回的文件的名字
    }),
  );
}
//掉用后端接口 获取文件数据 GET 请求
export function exportGetFile(url: string, data: any) {
  return executeAndTryCatch(() =>
    request<Record<string, any>>(url, {
      method: 'GET',
      params: data,
      responseType: 'blob',
      getResponse: true, // 用来获取后端返回的文件的名字
    }),
  );
}

type DownloadFileType = {
  url: string;
  data?: any;
  fileName?: string;
  method?: string;
};

// 封装掉用下载的方法
export const downloadFile = async ({
  url,
  fileName,
  data = {},
  method = 'post',
}: DownloadFileType) => {
  const res: any =
    method.toLowerCase() === 'get'
      ? ((await exportGetFile(url, data)) as Blob)
      : ((await exportPostFile(url, data)) as Blob);
  const。filename = (
    res.response.headers.get('content-disposition').split('filename=')?.[1] || ''
  ).replace(/"/g, '');
  const blob = new Blob([res]);
  const elink = document.createElement('a');
  elink.download =。filename || fileName || 'download.xlsx';
  elink.style.display = 'none';
  elink.href = URL.createObjectURL(blob);
  document.body.appendChild(elink);
  elink.click();
  URL.revokeObjectURL(elink.href); // 释放URL对象
  document.body.removeChild(elink);
};

// 使用的地方
const config = {
	data: {},
	method: 'get',  
}
const url = exportFile(id);
config.url = url;
config.fileName = '参数配置.json';
downloadFile(config);