REACT Umi根据后端返回二进制文件流，前端输出成XLSX文件，直接下载

最新推荐文章于 2024-05-26 13:06:51 发布
最新推荐文章于 2024-05-26 13:06:51 发布
阅读量2.3k 收藏 1
点赞数 2
文章标签： react 前端框架 javascript es6 spring boot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53699919/article/details/123661207
版权

项目需求:需要将列表信息，前端直接下载成文件，接口后端返回的是二进制文件流，需要前端处理,返回的结果如下：

1.这里我使用的是umi的request请求接口，需要在请求接口中设置:responseType: 'blob'

注:若不设置下载的文件打开会出现如下错误:

2.下面展示接口完整导出列表信息的代码,可以参考一下:

 

 

qq_1507745543
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
React umi Ant Design常用导入、导出Excel文件方案
sinat_15625949的博客
11-11 2235
介绍 项目中常用的导入导出Excel文件方法封装，希望各位多提意见和补充。 一、导入文件 // 导入接口 import requestUpload from 'umi-request'; export async function importFile(params: any) { return requestUpload(`${globalData.url}/api/importFile`, { method: 'POST', ...params, }); } // 使
月哥-前端-社招1
08-03
月哥-前端-社招1
React umi项目中文件的上传、下载
qq_43284411的博客
05-26 856
点击上传
umi-request下载数据流
dergfg的博客
07-20 3647
/** * 获取数据流 */ import React from 'react'; import { Button } from 'antd'; import 'antd/dist/antd.css'; import request from 'umi-request'; export default () => { function download() { request('/get-data-stream', { method: 'POST', // 重
reach Umi 项目下载文件
qq_42894991的博客
02-08 383
umijs项目文件下载
react项目中下载流文件的方法
qq_47801638的博客
11-11 3801
服务端返回文件流格式的文件，前端需要把流文件通过Blob转换成我们想要下载的格式。比如以.xlsx，.xls结尾的格式文件。在src目录下创建utils文件夹，在文件夹中创建downloadFile文件。
python爬虫系列之下载在线文档Excel(石墨)
坐板凳上敲代码
05-28 5304
本文讲述使用python下载在线文档中的Excel数据到本地。下方有完整代码，方便食用。
React获取Java后台文件流并下载Excel文件流程解析
08-19
React获取Java后台文件流并下载Excel文件流程解析是指在React前端应用程序中，通过axios库发送POST请求到Java后台服务器，以获取Excel文件流，并将其下载到本地计算机中。该过程涉及到Java后台服务器的响应头设置、...
原生JS上传文件，获取文件二进制数据及文件大小和文件名称
07-07
本知识点将深入探讨如何使用原生JavaScript实现文件上传，获取文件的二进制数据、大小以及文件名称。 首先，我们需要一个HTML元素，通常是`<input type="file">`，用于让用户选择要上传的文件。例如： ```html ``...
FTX:React.js前端+ Golang后端=文件传输和消息传递程序
04-12
React.js前端+ Golang后端=文件传输和消息传递程序 建造 界面 npm run build 后端 go build 组播设置实用程序（仅Windows用户需要） cd SetMulticast go build 警告：此应用程序不是绝对安全的，同一网络上的...
一个前后端兼备的图书管理系统，前端react，后端flask
最新发布
06-21
前端发送AJAX请求（例如使用fetch或axios库）到后端，后端处理请求并返回数据，前端再根据返回的数据更新UI。跨域资源共享（CORS）策略需要在Flask服务器端进行配置，以允许来自React前端的请求。 在部署方面，前端...
react-csv-reader:处理CSV文件输入及其解析的React组件
05-02
它处理文件输入并以矩阵形式返回其内容。 文件： 您可以在的操场上或的。 安装 用yarn或npm安装包装。 含纱线： yarn add react-csv-reader 使用npm： npm install --save react-csv-reader 用法 基本用法：...
axios 文件流导出excel
zhengshaofeng1的专栏
07-13 788
axios 文件流导出excel 一 . 设置responseType 为 arraybuffer axios.post(`${origin}/baisp_appointment/api/plat/xxx`, params, { responseType: 'arraybuffer', headers: { token: getToken(), account: getAccount() }, }).then((res) => { let fileName = format(n
react处理后端返回的文件流(img/jpeg)并展示
qq_43609574的博客
11-24 4195
react前端获取验证码图片并展示 背景：返回的类型为img/jpeg，数据以文件流的形式返回 这时preview里会打印图片，看不到文件流信息 验证码展示处使用img标签 <img id='captchaImg' src='' alt="点击刷新" style={{ cursor:'pointer' }} onClick={getCaptcha} /> getCaptcha方法 const getCaptcha = async (url)=&gt
python使用requests下载文件
lixiaomei0623的专栏
06-29 2924
requests下载文件
[Python] 爬虫requests下载保存csv xlsx zip各种资源文件
Spade_的博客
10-19 7181
Requests 是用Python语言编写，基于 urllib，采用 Apache2 Licensed 开源协议的 HTTP 库。它比 urllib 更加方便，可以节约我们大量的工作，完全满足 HTTP 测试需求。Requests 的哲学是以 PEP 20 的习语为中心开发的，所以它比 urllib 更加 Pythoner。 import requests requests.get(..., stream=False) 当把get函数的stream参数设置成False时，它会立即开始下载文件并放到内.
后端返回可下载的xlsx文件，但是前端接收下载后为乱码
changyana的博客
08-19 986
后端传的是blob类型文件，所以前端接收时也要限制一下类型
umijs 下载文件
总结，交流，记录，成长
07-04 937
umijs项目中使用下载功能， 下载使用文件流方式
umi-request 获取数据流
LanJu的博客
12-29 2997
首发于 语雀文档 前言 微前端产品开发中使用到了 umi-request 这个，类似于 axios（但貌似又强于 axios），因为碰到文件下载的功能，也即是：获取数据流，记录一下。 其实最重要的两点无非是： responseType 要设置成 blob https://github.com/blueju/umi-request-practice/blob/4f11c63e7b47f730ed1bcdde867c6f4575241485/example/get-data-stream.jsx#L.
react+antd导出后端传入的二进制流文件内容为[object file]
09-06
在使用React Antd进行开发时，如果需要导出后端传入的二进制流文件内容，常常会遇到显示[object file]的情况。原因是React Antd默认将文件对象转换为字符串，并显示为[object file]。为了解决这个问题，我们需要进行...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_1507745543

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值