前端文件下載方式（待補充...

經常使用的幾種方式

• 使用 a 標籤直接點擊 url
• 使用 iframe 標籤掛載
• 使用 axios請求url 進行 blob 轉換，再添加 a 標籤
• 使用 表單提交

a 標籤點擊方式

步驟

1. 獲取到接口地址 url

2. const link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.setAttribute('download', 'test.zip')
    link.click()
   複製代碼

   注意：關於 a 標籤的 download 屬性用法

   

   

優缺點

1. 優勢1 方式簡單，通常都能實現, 不須要額外寫進度條
2. 優勢2 a 標籤無需掛載到 dom，只須要給這個a 標籤執行 click() 事件就能觸發瀏覽器下載文件
3. 缺點 遇到連續點擊不一樣的文件下載時，或網絡速度慢時，若是服務器還沒有反應時就連續下一個文件下載（請求會被cancel 掉)，會出現上一個文件未能下載的狀況，也就是只有最後一個點擊下載生效

iframe 標籤掛載方式

步驟

1. 獲取到接口地址 url

2. const link = document.createElement('iframe')
    link.style.display = 'none'
    link.src = url
    // 注意 iframe 標籤必須掛載到 dom 上，不然沒法觸發瀏覽器下載（也是缺點之一）
    document.body.appendChild(link)
   複製代碼

優缺點

1. 優勢1 方式簡單，通常也都能實現，不須要額外寫進度條
2. 優勢2 遇到連續下載不一樣文件，能避免服務器未反應的狀況，即請求不會被cancel(解決 a 標籤的問題)
3. 缺點1 iframe 標籤必須掛載到 dom 上，而且在請求未成功前不能刪除

axios請求url 方式

步驟

1. 步驟1 須要一個能將請求結果轉換成 blob 流格式的 axios 實例，去請求該 url

   （此處假設請求方式爲 get 請求）

   

   注意：代碼中幾個比較重要的 api ( 摘取自 MDN )

   (1). responseType：

   XMLHttpRequest.responseType屬性是一個枚舉類型的屬性，返回響應數據的類型。它容許咱們手動的設置返回數據的類型。若是咱們將它設置爲一個空字符串，它將使用默認的"text"類型。

   在工做環境 (Work Environment) 中將 responseType 的值設置爲 "document" 一般會被忽略. 當將 responseType 設置爲一個特定的類型時，你須要確保服務器所返回的類型和你所設置的返回值類型是兼容的。那麼若是二者類型不兼容呢?恭喜你，你會發現服務器返回的數據變成了 null ，即便服務器返回了數據。還有一個要注意的是，給一個同步請求設置 responseType 會拋出一個 InvalidAccessError 的異常。

   responseType 支持如下幾種值：

   

   (2). FileReader：

   FileReader 對象容許 Web 應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩衝區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。

   

   

   (3). HTTP Header：

   content-type 根據實際請求頭判斷, 普通數據請求中會返回 'application/json; charset=utf-8'

   

2. 步驟2 須要一個文件轉換的方法 blobToFile( blob, fileName )

   思路是：根據請求返回的 blob 對象，利用 URL.createObjectURL() 得到該文件二進制流的 URL對象，而後再執行新建 a 標籤，執行點擊(這裏與第一種 a 標籤方法相似），最後釋放這個 URL對象)

   

3. 步驟3 調用請求下載方法，並執行文件轉換，即：

   // 引入相關文件
   import { DOWNLOAD_GET } from './API/get'
   import blobToFile from from '@/utils/blobToFile'
   
   // methods
   getDownLoadFile() {
       return DOWNLOAD_GET(`${url}`) 
   }
   async downLoadFile() {
       // this.url 是這個文件的地址
       // this.fileName 是這個文件的文件名，這裏稍後補充如何自動填入
       try {
           const blob = await this.getDownFile(this.url)
           blobToFile(blob, this.fileName)
       }
   }
   複製代碼