简谈文件下载的三种方式

一、前言

本文章将以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文件即可。
缺点：对于数据量不大的文件，这种方式是可行的。但是对于数据量很大，像几千几万条数据的话，性能缓慢是它最大的弊端。