react接收后端文件_React 文件流实现文件下载
同种方法-两种方案:
第一种:页面上自己手动添加a标签
第二种:js自动生成a标签(推荐第二种)
今天在react项目开发过程中,有这样的一个需求就是文件下载。
自己认为:通过接口请求后端发给返给自己的会是一个文件下载的地址或者路径什么的,只要把这个地址赋值给a链接即可
实际情况:后端发给我的是一端文件流,那么就是需要们自动去解析文件流,然后把解析出来的数据,通过a标签进行下载
第一种方案:
//点击文件下载
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
fetch(downloadFiles, { //downloadFiles 接口请求地址
method: 'get',
credentials: 'include',
headers: new Headers({
'Content-Type': 'application/json',
'X-Auth-Token': User.getToken(),//设置header 获取token
})
}).then((response) => {
response.blob().then(blob => {
let blobUrl = window.URL.createObjectURL(blob);
let aElement = document.getElementById('downloadDiv'); //获取a标签元素
let filename = times.formatNowDate() + '.zip';//设置文件名称
aElement.href = blobUrl;//设置a标签路径
aElement.download = filename;
aElement.click();
window.URL.revokeObjectURL(blobUrl);
});
}).catch((error) => {
console.log('文件下载失败', error);
});
}}
>
文件下载
//定义个a标签数组
const Anchor = props => {
return (
{props.children}
);
};
//页面上使用a标签数组
//隐藏不显示
第二种方案:(这块我封装了一个组件)
/**
* @desc:这是一个文件下载组件
* @param:参数说明
* api_url:接口地址
* icon: 下载图片设置
* text: 下载文本设置
* downFileBtnClass: 按钮样式设置
*/
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {Button, Icon} from 'antd';
import User from '/utils/user';
import times from '_TOOLS_/times';
import styles from './index.less';
const downFileBtn = styles.downFileBtn;
class FileDown extends PureComponent {
constructor(props) {
super(props);
this.state = {
loadingStatus: true,
buttonDisabled: false
}
}
//文件下载操作
handleDownFile = (event, api_url) => {
event.preventDefault();
event.stopPropagation();
//开启loading 按钮置灰
this.setState({
loadingStatus: false,
buttonDisabled: true,
});
fetch(api_url, {
method: 'get',
credentials: 'include',
headers: new Headers({
'Content-Type': 'application/json',
'X-Auth-Token': User.getToken(),
}),
}).then((response) => {
response.blob().then(blob => {
//关闭loading 按钮恢复正常
this.setState({
loadingStatus: true,
buttonDisabled: false,
});
let blobUrl = window.URL.createObjectURL(blob);
const filename = times.formatNowDate() + '.zip';
const aElement = document.createElement('a');
document.body.appendChild(aElement);
aElement.style.display = 'none';
aElement.href = blobUrl;
aElement.download = filename;
aElement.click();
document.body.removeChild(aElement);
});
}).catch((error) => {
//关闭loading 按钮恢复正常
this.setState({
loadingStatus: false,
buttonDisabled: false,
});
console.log('文件下载失败', error);
});
};
render() {
const {api_url, text, icon, downFileBtnClass} = this.props;
const {loadingStatus, buttonDisabled} = this.state;
return (
type="primary"
className={downFileBtnClass}
onClick={(event) => this.handleDownFile(event, api_url)}
disabled={buttonDisabled}
>
{loadingStatus ? text : '下载中...'}
);
}
}
//定义属性 类型以及是否必填项
FileDown.proTypes = {
api_url: PropTypes.isRequired
};
//定义属性的默认值
FileDown.defaultProps = {
text: '文件下载',
icon: 'download',
downFileBtnClass: downFileBtn,
};
export default FileDown;
react接收后端文件_React 文件流实现文件下载相关推荐
- react接收后端文件_React获取Java后台文件流并下载Excel文件流程解析
记录使用blob对象接收java后台文件流并下载为xlsx格式的详细过程,关键部分代码如下. 首先在java后台中设置response中的参数: public void exportExcel(Htt ...
- react接收后端文件_React如何从后端获取数据并渲染到前端?
ajax和json对于reactjs来说主要是表现形式不同,但最终都会变成js object,根据具体情况不同而选择. 比如我们建立一个用于筛选网站提供能够的服务项目(service)的页面,这个页面 ...
- 前端get请求接收后端传来的二进制文件流blob实现下载功能,解决下载文件打不开问题
解决方法: 前端在请求下载文件接口时,要设置responseType为blob. 前端代码: export function download(url, params) {return ...
- 小猿圈Python学习教程之后端接收前端回传的文件方法
现在人工智能已经深入到千家万户,随之而来的就是python技术的火爆,今天小猿圈python讲师为你讲解一下后端接收前端回传的文件方法,希望对于刚刚自学python的你有一定的帮助. 如下所示: fi ...
- .NET Core Web API使用HttpClient提交文件的二进制流(multipart/form-data内容类型)
需求背景: 拼多多优惠券 m.fenfaw.net 在需要通过服务端请求传递文件二进制文件流数据到相关的服务端保存时,如对接第三方接口很多情况下都会提供一个上传文件的接口,但是当你直接通过前端Ajax ...
- springcloud feign前后端分离实现文件上传下载
文件上传 一.服务消费者Controller package com.biddingportal.controller;import com.alibaba.fastjson.JSON; import ...
- java流与文件——操作文件
[0]README 0.1) 本文描述转自 core java volume 2, 旨在理解 java流与文件--操作文件 的相关知识: 0.2) for source code, please vi ...
- [react] React怎样引入svg的文件?
[react] React怎样引入svg的文件? import React from 'react'; import logo from './logo.png'; // Tell Webpack t ...
- Web后端servlet—使用servlet的Part接口实现单文件多文件上传、以及日期格式转换为sql日期格式的实现
JDBC工具类JdbcFileDateUtil上传文件和日期格式转换,包含单文件多文件上传最新最简单简便的办法 本文档介绍了文件上传的处理方法,包括当前端form表单的编码类型为enctype=&qu ...
最新文章
- 16_python_面向对象
- java调用dueros_DuerOS纯java sdk 支持windows,唤醒(仅linux),技能
- java面试题大合集(开发者必看一)
- python爬虫 爬取bilibili新番榜
- 基于流的EXCEL文件导出,SXSSFWorkbook源码解析
- Running 1 linux_yesterdaytodaytomorrow
- linux 每日学一点《linux中让NMAP命令跟防火墙躲猫猫》
- [bx]和loop指令
- Android程序水印效果
- 主流机器视觉软件介绍
- 零数据分析实习经历如何秋招?
- 微信小程序开发者工具无法登录 不显示登录二维码
- 银企直连增加支付货币的配置方法 :事务FBZP
- 新浪出输入法了,深蓝词库转换更新到1.3.1——增加对新浪拼音输入法的支持...
- 什么是CRUD? 数据库(含CRUD)的操作
- 武汉移动137和武汉电信189手机业务比较
- 2020年中国空气压缩机行业发展现状、竞争格局及未来发展趋势分析,国内市场竞争激烈,市场规模将破600亿元「图」
- excel两列乱序姓名如何一一对应 excel 两列数据自动配对
- matlab仿真匹配滤波器,应用于雷达系统匹配滤波器的matlab仿真
- linux hiredis yum,Centos7 安装Redis和Hiredis