一、前言
本文章将以excel
报表下载为例,给大家介绍三种文件下载的方式。
原文地址:简谈文件下载的三种方式 | Rychou
二、正文
1. 通过服务器文件地址下载
这是最常见的文件下载方式,大多数网站的音频、视频、种子文件等文件的下载方式都是通过这种方式实现的。
这种方式具体的实现方式是这样的:
- 前端请求获取
excel
报表的下载地址 - 后端根据前端的请求,查询数据库并把查询结果保存到服务器的一个
excel
文件中 - 后端把这个
excel
文件地址返回给前端 - 前端将此
excel
文件地址赋值给一个<a href="http://test.com/excel.xls"/>
,并点击此<a/>
标签,利用浏览器的默认行为下载此文件。
优点:实现方式简单,通用。
缺点:需要把文件保存到服务器,会占用服务器资源。这个缺点也有解决方式:给保存的文件设定一个时效性,过了这个时效,服务器就会删除这个文件。
2. 通过二进制数据流的方式下载
这种方式是我目前采用的方式,用于处理报表下载。
这种方法的具体实现流程如下:
- 前端请求获取
excel
报表的二进制数据流 - 后端根据前端请求,查询数据库并把查询结果转成二进制数据流。
注意:这里并不生成一个文件保存在服务器
- 后端把二进制数据流返回给前端
- 前端把二进制数据流转成
URL
对象并赋值给<a/>
标签 - 点击
<a/>
标签实现下载
我用的是axios
网络请求库
代码示例:
axios({
url: '/monitors/export',
method: 'GET',
responseType: 'blob',//指定返回数据格式
}).then(res => {
// 将二进制数据流转成URL对象
const url = window.URL.createObjectURL(
new Blob([res.data], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
}),
);
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', '车辆监控列表.xls'); // 需要指定文件格式。
document.body.appendChild(link);
link.click(); //点击事件
});
优点:不需要服务器生成文件,并保存到服务器中,可以有效减少服务器资源占用。
缺点:这种方式可能并不那么通用,也可能有一定的兼容性问题。
3. 前端下载
这种方式是我测试过,确实可行的一种方法,它的具体实现原理是这样的,前端通过类似export-from-json的库,把JSON
格式的报表数据,导出到excel
文件中。
优点:不需要为下载单独发起一次网络请求,直接把保存在前端的请求的报表数据,导出到excel
文件即可。
缺点:对于数据量不大的文件,这种方式是可行的。但是对于数据量很大,像几千几万条数据的话,性能缓慢是它最大的弊端。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。