admin 管理员组文章数量: 887021
在浏览器中我们经常会下载东西，比如点击一个按钮就将文件下载了下来。
本篇文章将讲述如何用React实现上述功能。
目录
- 一、后端返回文件流
- 方法一：使用axios
- 1、React中安装并引入axios依赖
- 2、js文件
- 方法二：使用XMLHttpRequest
- 二、后端返回文件url地址
- 1. js函数如下
- 2.调用函数
一、后端返回文件流
如果后端提供了一个接口，该接口返回文件流信息，要通过该文件流下载文件可参考下面的步骤。
方法一：使用axios
1、React中安装并引入axios依赖
在React项目中使用axios请求，首先需要安装axios：
npm install axios --save
然后在react文件中导入axios依赖：
import axios from 'axios';
2、js文件
示例如下
import React, { Component } from 'react';
import axios from 'axios';
export class DownFile extends Component {
downSubmit= () =>{
axios({
url: '/test/down/downloadFile', //调用的接口，该接口返回文件流
method: 'get',
params: {
//接口的参数
name:"张三",
id:"1"
},
responseType: 'blob',
}).then((response) => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'myfile.log'); //下载后的文件名myfile.log
document.body.appendChild(link);
link.click();
});
}
render() {
return (
<div>
//省略了downloadButton样式
<button type="buttom" className="downloadButton" style={{color: "#fff",borderColor: "#44BBFC", fontSize: "14px",background: "#2196f3"}} onClick={this.downSubmit} >下载</button>
</div>
);
}
}
然后点击下载按钮就可以将文件下载到浏览器了。
方法二：使用XMLHttpRequest
function download(url) {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload =function() {
if (xhr.status === 200) {
// 获取文件blob数据并保存
saveAs(xhr.response, "download.docx");
}
};
xhr.send();
}
//name 为下载后的文件名
function saveAs(data, name) {
var urlObject = window.URL || window.webkitURL || window;
var export_blob = new Blob([data]);
var save_link = document.createElementNS('http://www.w3/1999/xhtml', 'a')
save_link.href = urlObject.createObjectURL(export_blob);
save_link.download = name;
save_link.click();
}
二、后端返回文件url地址
有时候我们只知道文件在服务器的存储url地址，要通过这个url去下载文件可参考下面的步骤。
1. js函数如下
//url是文件的url ,filename是文件名
function download(url, filename) {
const link = document.createElement("a");
link.href = url;
link.download = filename;
link.click();
}
2.调用函数
示例如下
download("http://127.0.0.1:8080/mbos/download/attach/myExcelTest.docx", "myExcelTest.docx");
就可以将文件下载到浏览器了。
参考：
React中使用axios发送请求的常用方法
How to download files using axios
a标签创建下载链接
Blob
版权声明：本文标题：前端React下载文件到浏览器 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1727388439h1112984.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论