簡談文件下載的三種方式

1、前言

本文章將以excel報表下載爲例，給你們介紹三種文件下載的方式。

原文地址：簡談文件下載的三種方式 | Rychou

2、正文

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文件便可。
缺點：對於數據量不大的文件，這種方式是可行的。可是對於數據量很大，像幾千幾萬條數據的話，性能緩慢是它最大的弊端。