11

一、前言

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

xxxsimons
599 声望30 粉丝

大四前端一枚