React + hooks + Ts 实现将后端响应的文件流(如Pdf)输出到浏览器下载

React 篇

一些关于react 学习与总结

这篇是记录开发中关于实现将后端响应的文件流(如Pdf)输出到浏览器下载,基于React + Hooks + Ts。


开发场景:

实现将后端响应的文件流(如Pdf)输出到浏览器下载,


思路:

使用axios库来发送请求并接收后端响应的pdf文件,然后使用Blob对象将响应数据转换为二进制数据,最后使用URL.createObjectURL()方法将二进制数据转换为URL,然后将URL赋值给a标签的href属性,再使用a标签的click()方法触发下载。

实现过程:

核心代码如下:

javascript 复制代码
<Col span={22} >
       <Button type="primary" size={"large"} onClick={handleDownload} disabled={loading}>
        {loading ? '下载中...' : '下载文件'}
        {/*{pdfUrl && <iframe src={pdfUrl} width="100%" height="500px" />}*/}
        </Button>
</Col>

具体实现方法如下

javascript 复制代码
   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);
        }
    }

总结

使用useState钩子来保存PDF文件的URL。当用户点击下载按钮时,我们使用axios发送GET请求,并将响应类型设置为blob。然后,我们使用Blob对象将响应数据转换为二进制数据,并使用URL.createObjectURL()方法将其转换为URL。最后,我们将URL保存到state中,并使用a标签的click()方法触发下载

相关推荐
musk121210 分钟前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang2 小时前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼2 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿2 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再2 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5552 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录2 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css