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 && <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()方法触发下载
相关文章:
React + hooks + Ts 实现将后端响应的文件流(如Pdf)输出到浏览器下载
React 篇 一些关于react 学习与总结 这篇是记录开发中关于实现将后端响应的文件流(如Pdf)输出到浏览器下载,基于React Hooks Ts。 开发场景: 实现将后端响应的文件流(如Pdf)输出到浏览器下载,…...
大数据基础设施搭建 - JDK
一、创建目录 需要在root账号下操作,因为/目录下只能用root账号创建目录 1.1 创建目录 [roothadoop102 ~]# mkdir /opt/software/ [roothadoop102 ~]# mkdir /opt/module/1.2 修改权限 修改module、software文件夹的所有者和所属组均为hadoop用户,远程使…...
从0到0.01入门React | 010.精选 React 面试题
🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入…...
Docker启动SRS流媒体服务器
一、安装Docker 1.1、下载windows桌面版Windows 1.2、配置镜像 镜像加速器镜像加速器地址Docker 中国官方镜像https://registry.docker-cn.comDaoCloud 镜像站http://f1361db2.m.daocloud.ioAzure 中国镜像https://dockerhub.azk8s.cn科大镜像站https://docker.mirrors.ustc…...
php+MySQL防止sql注入
1、使用预处理语句(Prepared Statements):预处理语句能够防止攻击者利用用户输入来篡改SQL语句,同时也能提高执行效率。通过将用户的输入参数与SQL语句分离,确保参数以安全的方式传递给数据库引擎,避免拼接…...
git 删除远程非主分支
git删除远程分支问题及git批量删除已合并的远程分支 - joshua317的博客 git push origin --delete branch-name 本版本Gitlab没有设置按钮,所以不能在网页上删除项目。但是可以在本地使用上述命令来删除远程仓库中非主分支的分支。 测试过不论在哪个分支操作都可…...
【MySQL学习】C++外部调用
#include "mysql.h" MYSQL *mysql; MYSQL_RES *rec; MYSQL_ROW row; (1)连接 char *server "localhost"; char *user "root"; char *password "hello"; char *database "mysql"; mysql mysql_i…...
Backblaze 2023 Q3硬盘故障质量报告解读
作为一家在2021年在美国纳斯达克上市的云端备份公司,Backblaze一直保持着对外定期发布HDD和SSD的故障率稳定性质量报告,给大家提供了一份真实应用场景下的稳定性分析参考数据。2023年度之前发布的两次报告,请参考: Backblaze发布2…...
docker安装elasticsearch,elasticsearch-head
安装elasticsearch 1、执行命令:docker pull elasticsearch:8.11.1 2、执行命令:docker run --name elastic -p 9200:9200 -p 9300:9300 -e "discovery.typesingle-node" -d elasticsearch:8.11.1 3、执行命令:docker exec -it …...
rabbitmq 集群搭建
RabbitMQ集群介绍 RabbitMQ集群是一组RabbitMQ节点(broker)的集合,它们一起工作以提供高可用性和可伸缩性服务。 RabbitMQ集群中的节点可以在同一物理服务器或不同的物理服务器上运行。 RabbitMQ集群的工作原理是,每个节点在一个…...
【云原生-Kurbernets篇】Kurbernets集群的调度策略
调度 一、Kurbernetes的list-watch机制1.1 list-watch机制简介1.2 创建pod的流程(结合list-watch机制) 二、Scheduler的调度策略2.1 简介2.2 预选策略(predicate)2.3 优选策略(priorities) 三、标签管理3.1…...
Unity中Shader矩阵的乘法
文章目录 前言一、矩阵乘以标量二、矩阵和矩阵相乘1、第一个矩阵的列数必须 与 第二个矩阵的行数相等,否则无法相乘!2、相乘的结果矩阵,行数由第一个矩阵的行数决定,列数由第二个矩阵的列数决定! 三、单位矩阵四、矩阵…...
C++ STL简介
1. 什么是STL STL(standard template libaray-标准模板库):是C标准库的重要组成部分,不仅是一个可复用的组件库,而且是一个包罗数据结构与算法的软件框架。 2. STL的版本 原始版本 Alexander Stepanov、Meng Lee 在惠普实验室…...
如何优雅的使用contorller层
一个完整的后端请求由 4 部分组成: 接口地址(也就是 URL 地址)请求方式(一般就是 get、set,当然还有 put、delete)请求数据(request,有 head 跟 body)响应数据ÿ…...
发现区块链世界的新大门——AppBag.io DApp导航网站全面解析
随着区块链技术的飞速发展,分布式应用(DApp)个充满创新和可能性的领域里,appbag.io DApp导航网站应运而生,为您打开探索区块链世界的新大门。 区块链应用的集大成者 AppBag.io DApp导航网站不仅是一个DApp的集散地&a…...
C#多线程Thread、Task
在C#中,线程可以用于完成需要耗费较长时间的操作,而不会阻塞用户界面。一个程序可以有多个线程,每个线程可以并行执行代码。 在C#中,可以使用System.Threading.Thread类来创建和控制线程,使用System.Threading.Mutex类…...
Qt QWebSocket实现JS调用C++
目录 前言1、QWebChannel如何与网页通信2、QWebSocketQWebChannel与网页通信2.1 WebSocketTransport2.2 WebSocketClientWrapper2.3 初始化WebSocket服务器2.4 前端网页代码修改 总结 前言 本篇主要介绍实现JS调用C的另一种方式,即QWebSocketQWebChannel。与之前的…...
Android Matrix的使用详解(通过矩阵获取到图片缩放比例和角度)
网上查了好久相关的资料,都没有明确的答案。最终通过多次测试结果,结合安卓定义的矩阵含义,推算出来矩阵的数学含义以及相关的计算公式 1.获取Matrix矩阵: Matrix matrix new Matrix(); float[] matrixValues new float[9]; …...
【Spring】bean的生命周期
这里写目录标题 1. 在类中提供生命周期控制方法,并在配置文件中配置init-method&destroy-method(配置)关闭容器操作1:ctx.close()关闭容器操作2:关闭钩子:ctx.registerShutdownHook() 2. 实现接口来做和…...
C#运算符重载
运算符重载允许你重新定义内置运算符(如、-、*等)的行为,以便它们可以用于自定义类型(类/结构体)。通过运算符重载,你可以为自定义类型创建更直观和灵活的操作。 在C#中,可以重载的运算符如下&…...
华为云AI开发平台ModelArts
华为云ModelArts:重塑AI开发流程的“智能引擎”与“创新加速器”! 在人工智能浪潮席卷全球的2025年,企业拥抱AI的意愿空前高涨,但技术门槛高、流程复杂、资源投入巨大的现实,却让许多创新构想止步于实验室。数据科学家…...
条件运算符
C中的三目运算符(也称条件运算符,英文:ternary operator)是一种简洁的条件选择语句,语法如下: 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true,则整个表达式的结果为“表达式1”…...
SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理)
上一章用到了V2 的概念,其实 Fiori当中还有 V4,咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务),代理中间件(ui5-middleware-simpleproxy)-CSDN博客…...
C#学习第29天:表达式树(Expression Trees)
目录 什么是表达式树? 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持: 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...
根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要
根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分: 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...
6️⃣Go 语言中的哈希、加密与序列化:通往区块链世界的钥匙
Go 语言中的哈希、加密与序列化:通往区块链世界的钥匙 一、前言:离区块链还有多远? 区块链听起来可能遥不可及,似乎是只有密码学专家和资深工程师才能涉足的领域。但事实上,构建一个区块链的核心并不复杂,尤其当你已经掌握了一门系统编程语言,比如 Go。 要真正理解区…...
在 Visual Studio Code 中使用驭码 CodeRider 提升开发效率:以冒泡排序为例
目录 前言1 插件安装与配置1.1 安装驭码 CodeRider1.2 初始配置建议 2 示例代码:冒泡排序3 驭码 CodeRider 功能详解3.1 功能概览3.2 代码解释功能3.3 自动注释生成3.4 逻辑修改功能3.5 单元测试自动生成3.6 代码优化建议 4 驭码的实际应用建议5 常见问题与解决建议…...
负载均衡器》》LVS、Nginx、HAproxy 区别
虚拟主机 先4,后7...
python打卡第47天
昨天代码中注意力热图的部分顺移至今天 知识点回顾: 热力图 作业:对比不同卷积层热图可视化的结果 def visualize_attention_map(model, test_loader, device, class_names, num_samples3):"""可视化模型的注意力热力图,展示模…...
LUA+Reids实现库存秒杀预扣减 记录流水 以及自己的思考
目录 lua脚本 记录流水 记录流水的作用 流水什么时候删除 我们在做库存扣减的时候,显示基于Lua脚本和Redis实现的预扣减 这样可以在秒杀扣减的时候保证操作的原子性和高效性 lua脚本 // ... 已有代码 ...Overridepublic InventoryResponse decrease(Inventor…...
