前端實現文件下載的方式

1.若是後端定義的接口是下載文件的路徑。這種下載方式簡單粗暴：方法不少，任君選擇：

•  window.open(url) 
  
• location.href = url
  
• 建立a標籤的方式： < a href = url download = 「文件名.doc「 > </a>
  
•  建立iframe方式：<iframe src=url></iframe >
  
• 表單提交方式： < form method = 「get「 action = url > </form>
  

關於如何動態建立標籤去下載，下面的第二種方法以a標籤爲例

2.若是後端定義的接口是返回的是文件的二進制流。

這種方式須要你將返回的二進制blob對象，寫入文件，而後實現下載。翠花，上源碼。。。
(看完大家儘管去嘗試，下載不了算我輸)

axios({
  method: 'get',
  url: `${baseUrl}/pur/contract/export/${ids}`,  // 你本身的下載地址
  responseType: 'blob'     // responseType須要根據接口響應的數據類型去設置
}).then(res => {
  let blob = new Blob([res.data], {
    type: 'application/octet-stream'  // 下載的文件類型格式（二進制流，不知道下載文件類型能夠設置爲這個）, 具體請查看HTTP Content-type 對照表
  })
  if (window.navigator && window.navigator.msSaveOrOpenBlob) {  // IE下對blob的兼容處理
    window.navigator.msSaveOrOpenBlob(blob, '合同列表.xlsx');
    return
  }
  let url = URL.createObjectURL(blob)
  let a = document.createElement('a')
  a.style.display = 'none'
  a.href = url
  a.setAttribute('download', '合同列表.xls')   // 設置下載的文件名
  document.body.appendChild(a) 
  a.click()
  document.body.removeChild(a)       //下載完成移除dom元素
  URL.revokeObjectURL(url)     //釋放掉blob對象
}
  複製代碼

如下就是下載成功後的截圖：

3.總結

爲何會有這兩種下載方式呢？

通常狀況下，想要實現文件下載/導出功能，須要在前端發送下載請求到服務端，而後由服務端經過 獲取數據 -> 生成數據 -> 生成文件三個步驟，而且在響應請求頭設置Content-Disposition: attachment;filename=***.doc 用於指定文件類型、文件名和文件編碼等，瀏覽器接收到響應後就會觸發下載行爲。可是有時候這種交互是一種多餘的資源和帶寬消耗，這時候客戶端根據收到的二進制流信息寫入文件，生成下載任務，能節省很多的資源和時間開銷。

看完這篇文章，媽媽不再用擔憂前端的我要怎麼處理後臺返回的文件流了。據說昨天有一個朋友看了個人文章後而且點了個贊，就中了五百萬，不知道是否是真的...聽到他說這句話, 我反手就是一個點贊加666，寫博客的動力都瞬間提高很多.... 後續我將會持續更新一些我在項目上應用的一些例子，但願對大家有所幫助！謝謝。。。