青岛市住房和城乡建设局网站查询,旅游公司的网站怎么做,公司只有一个设计,wordpress 源码整合React 篇 一些关于react 学习与总结 这篇是记录开发中关于实现将后端响应的文件流#xff08;如Pdf#xff09;输出到浏览器下载#xff0c;基于React Hooks Ts。 开发场景#xff1a; 实现将后端响应的文件流#xff08;如Pdf#xff09;输出到浏览器下载#xff0c;…React 篇 一些关于react 学习与总结 这篇是记录开发中关于实现将后端响应的文件流如Pdf输出到浏览器下载基于React Hooks Ts。 开发场景 实现将后端响应的文件流如Pdf输出到浏览器下载 思路 使用axios库来发送请求并接收后端响应的pdf文件然后使用Blob对象将响应数据转换为二进制数据最后使用URL.createObjectURL()方法将二进制数据转换为URL然后将URL赋值给a标签的href属性再使用a标签的click()方法触发下载。 实现过程 核心代码如下 Col span{22} Button typeprimary size{large} onClick{handleDownload} disabled{loading}{loading ? 下载中... : 下载文件}{/*{pdfUrl iframe src{pdfUrl} width100% height500px /}*/}/Button
/Col具体实现方法如下 const [loading, setLoading] useStateboolean(false); //钩子函数const [pdfUrl, setPdfUrl] useState();const handleDownload async() {setLoading(true);try {const response await axios.get(http://47.98.103:8887/oms/pdf/export_pdf_test, {responseType: blob, // 告诉axios响应类型为二进制数据params:{id:companyId //参数传给后端的是 id 已经获取到了}});const blob new Blob([response.data], { type: application/pdf }); // 将响应数据转换为二进制数据const url URL.createObjectURL(blob); // 将二进制数据转换为URLsetPdfUrl(url); // 将URL保存到state中const link document.createElement(a);link.href url;link.download 企业工商年报.pdf;link.click(); // 触发下载// const fileName response.headers[content-disposition].split()[1]; // 从响应头中获取文件名// saveAs(response.data, fileName); // 使用FileSaver.js保存文件} catch (error) {message.error(服务器繁忙请稍后重试)console.error(error);} finally {setLoading(false);}}总结 使用useState钩子来保存PDF文件的URL。当用户点击下载按钮时我们使用axios发送GET请求并将响应类型设置为blob。然后我们使用Blob对象将响应数据转换为二进制数据并使用URL.createObjectURL()方法将其转换为URL。最后我们将URL保存到state中并使用a标签的click()方法触发下载
