在浏览器中我们经常会下载东西，比如点击一个按钮就将文件下载了下来。
本篇文章将讲述如何用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.logdocument.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数据并保存that.saveAs(xhr.response, item.fname_l2+"."+item.fsimplename);}};xhr.send();}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

前端React下载文件到浏览器相关推荐

Blazor 中如何下载文件到浏览器
Blazor 中如何下载文件到浏览器目录一.前言二.方法一(导航跳转) 三.方法二(下载后传出) (一) 使用 RestSharp 下载 (二) 使用 BlazorDownloadFile 传出 ...
java 通过url下载文件到浏览器
前端传来url地址与文件名,下载文件到浏览器代码 (这里模拟,直接在代码里写了url,可以拼接在url后进行截取) 请求接口 @GetMapping("/findOperatorBarVO ...
两种常用的react 下载文件方法
总结了两种常用的react 下载文件到本地浏览器方法方法1:使用a 标签的href属性设置为文件路径,就可以触发下载行为. <akey={record.id}href={`/lib/attac ...
vue项目中点击button下载文件到浏览器
代码实现在src 下面的 directive 文件夹下新建目录 down-load-url down-load-url / index.js文件 /*index.js文件* 后端返回文件的url,前 ...
使用a标签下载文件，浏览器会直接打开解决方案
使用a标签下载文件,浏览器会直接打开解决方案背景一.HTML中的a标签实现点击下载二.即使使用a标签的download属性,chrome浏览器还是会打开三.解决方案解决方案一:使用ajax请 ...
java获取默认下载路径吗_java下载文件到浏览器默认路径
java下载文件到浏览器默认路径版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog..net/mengmeng2222222 一.controller层代码: @Requ ...
java byte 图片浏览器直接显示_以Spring Boot的方式显示图片或下载文件到浏览器的示例代码...
以Java web的方式显示图片到浏览器以Java web的方式下载服务器文件到浏览器以Spring Boot的方式显示图片或下载文件到浏览器请求例子:http://localhost:8080/ ...
下载---当前端调用下载文件接口，接口通了，浏览器却没有下载文件（不一定好使）
1.下载文件封装 import request from './request' export function download(url, params,filename) { reques ...
java返回pdf文件流给前端_如何实现springmvc将返回的给前端的pdf文件放在浏览器里预览？...
想在浏览器里直接GET目标URL,然后就把PDF在浏览器里预览出来(不用前端插件的前提下),就像这样: 后端代码: @RequestMapping(value = "/showPDF&quo ...

前端React下载文件到浏览器

目录