青岛市住房和城乡建设局网站查询辽宁建设工程信息网评标专家账号找回
React 篇
一些关于react 学习与总结
这篇是记录开发中关于实现将后端响应的文件流（如Pdf）输出到浏览器下载，基于React + Hooks + Ts。
开发场景：
实现将后端响应的文件流（如Pdf）输出到浏览器下载，
思路：
使用axios库来发送请求并接收后端响应的pdf文件，然后使用Blob对象将响应数据转换为二进制数据，最后使用URL.createObjectURL()方法将二进制数据转换为URL，然后将URL赋值给a标签的href属性，再使用a标签的click()方法触发下载。
实现过程：
核心代码如下：
<Col span={22} ><Button type="primary" size={"large"} onClick={handleDownload} disabled={loading}>{loading ? '下载中...' : '下载文件'}{/*{pdfUrl && <iframe src={pdfUrl} width="100%" height="500px" />}*/}</Button>
</Col>
具体实现方法如下
const [loading, setLoading] = useState<boolean>(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()方法触发下载