react 从后端获取文件流导出

本文主要是介绍react 从后端获取文件流导出，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

//掉用后端接口 获取文件数据 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);

这篇关于react 从后端获取文件流导出的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---