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#中,可以重载的运算符如下&…...
反向工程与模型迁移:打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下,商品详情API作为连接电商平台与开发者、商家及用户的关键纽带,其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息(如名称、价格、库存等)的获取与展示,已难以满足市场对个性化、智能…...
Java 8 Stream API 入门到实践详解
一、告别 for 循环! 传统痛点: Java 8 之前,集合操作离不开冗长的 for 循环和匿名类。例如,过滤列表中的偶数: List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...
理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP? 模型控制协议 (MCP) 是一种创新的协议,旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议,它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...
SpringTask-03.入门案例
一.入门案例 启动类: package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...
Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理
引言 Bitmap(位图)是Android应用内存占用的“头号杀手”。一张1080P(1920x1080)的图片以ARGB_8888格式加载时,内存占用高达8MB(192010804字节)。据统计,超过60%的应用OOM崩溃与Bitm…...
Java线上CPU飙高问题排查全指南
一、引言 在Java应用的线上运行环境中,CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时,通常会导致应用响应缓慢,甚至服务不可用,严重影响用户体验和业务运行。因此,掌握一套科学有效的CPU飙高问题排查方法&…...
莫兰迪高级灰总结计划简约商务通用PPT模版
莫兰迪高级灰总结计划简约商务通用PPT模版,莫兰迪调色板清新简约工作汇报PPT模版,莫兰迪时尚风极简设计PPT模版,大学生毕业论文答辩PPT模版,莫兰迪配色总结计划简约商务通用PPT模版,莫兰迪商务汇报PPT模版,…...
GO协程(Goroutine)问题总结
在使用Go语言来编写代码时,遇到的一些问题总结一下 [参考文档]:https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现: 今天在看到这个教程的时候,在自己的电…...
逻辑回归暴力训练预测金融欺诈
简述 「使用逻辑回归暴力预测金融欺诈,并不断增加特征维度持续测试」的做法,体现了一种逐步建模与迭代验证的实验思路,在金融欺诈检测中非常有价值,本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...
【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)
前言: 双亲委派机制对于面试这块来说非常重要,在实际开发中也是经常遇见需要打破双亲委派的需求,今天我们一起来探索一下什么是双亲委派机制,在此之前我们先介绍一下类的加载器。 目录 编辑 前言: 类加载器 1. …...
