在浏览器中我们经常会下载东西，比如点击一个按钮就将文件下载了下来。
本篇文章将讲述如何用React实现上述功能。

一、后端返回文件流

如果后端提供了一个接口，该接口返回文件流信息，要通过该文件流下载文件可参考下面的步骤。

方法一：使用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.org/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