簡談檔案下載的三種方式

xxxsimons發表於2019-01-19

一、前言

本文章將以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檔案即可。
缺點：對於資料量不大的檔案，這種方式是可行的。但是對於資料量很大，像幾千幾萬條資料的話，效能緩慢是它最大的弊端。

相關文章