-
React + hooks + Ts 实现将后端响应的文件流（如Pdf）输出到浏览器下载
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 && }*/} </Button> </Col>- 1
- 2
- 3
- 4
- 5
- 6
具体实现方法如下
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); // 将二进制数据转换为URL setPdfUrl(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); } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
总结
使用useState钩子来保存PDF文件的URL。当用户点击下载按钮时，我们使用axios发送GET请求，并将响应类型设置为blob。然后，我们使用Blob对象将响应数据转换为二进制数据，并使用URL.createObjectURL()方法将其转换为URL。最后，我们将URL保存到state中，并使用a标签的click()方法触发下载
-
相关阅读:
C++ 类的声明笔记
神经网络中的参数量和FLOPs的计算
11个在线免费调整图像大小而不会降低质量工具
百度搜索万亿规模特征计算系统实践
TCP VS UDP
Centos 安装Java库的多种方式
上海亚商投顾：沪指高开低走 钠离子电池、储能概念崛起
y106.第六章 微服务、服务网格及Envoy实战 -- 可观测应用之指标和日志(十七)
Linux 内存之vmstat
内网渗透-DC-9靶机渗透
- 原文地址：https://blog.csdn.net/qq_46703281/article/details/134425312
