前端文件下載的正確打開方式
前端涉及到的文件下載還是很多應用場景的，那麼前端文件下載有多少種方式呢？每種方式有什麼優缺點呢？下面就來一一介紹。
1. a 標籤
通過a標籤的download屬性來實現文件下載，這種方式是最簡單的，也是我們比較常用的方式，先來看示例代碼：
<a href="http://www.baidu.com" download="baidu.html">下載</a>就上面的這個示例，我們點擊下載，發現是跳轉到了百度的首頁，並沒有真的下載文件。
因爲a標籤下載只能下載同源的文件，如果是跨域的文件，這裏包括圖片、音視頻等媒體文件，都是預覽，也無法下載。
上面的代碼是直接通過書寫a標籤來實現文件下載，我們也可以通過js來實現，代碼如下：
const a = document.createElement('a')
a.href = 'http://www.baidu.com'
a.download = 'baidu.html'
a.click()
效果和上面的一樣，都是跳轉到百度的首頁，沒有下載文件。
這裏的重點是a標籤的download屬性，這個屬性是HTML5新增的。
它的作用是指定下載的文件名，如果不指定，那麼下載的文件名就會根據請求內容的Content-Disposition來確定，如果沒有Content-Disposition，那麼就會使用請求的URL的最後一部分作爲文件名。
2. window.open
上面使用a標籤的案例也可以通過window.open來實現，效果是一樣的，代碼如下：
window.open('http://www.baidu.com', '_blank')
這裏的_blank是指定打開的方式，如果不指定，那麼就會在當前頁面打開，這裏指定_blank，就是在新的頁面打開。
同樣a標籤的download屬性也是可以使用的，代碼如下：
window.open('http://www.baidu.com', '_blank', 'download=baidu.html')
當然這種方式也是有缺陷的，對比於a標籤，這種方式不能下載.html、.htm、.xml、.xhtml等文件，因爲這些文件會被當成html文件來處理，所以會直接在當前頁面打開。
同樣也不能下載跨域的文件，畢竟是window.open，不是window.download（window.download是假想）。
3. location.href
這種方式和window.open(url)是一樣的，代碼如下：
location.href = 'http://www.baidu.com'
這種方式擁有window.open的所有缺陷，所以不推薦使用，這裏只當作了解，所以不做過多的講解。
4. location.? 其他屬性
這裏的其他指代的都是能跳轉頁面的屬性，比如location.assign、location.replace、location.reload等，這些屬性都是可以實現文件下載的，代碼如下：
location.assign('http://www.baidu.com')
location.replace('http://www.baidu.com')
location.reload('http://www.baidu.com')
這裏的location.reload是有點特殊的，它的作用是重新加載當前頁面，但是它也可以接受一個參數，這個參數就是要跳轉的頁面，所以也可以實現文件下載。
當然同location.href一樣，這些方式的缺點都一樣，同時還有屬於每個屬性自身的特性，這裏只當拓展知識，不做過多的講解。
5. XMLHttpRequest
這種方式就是我們常說的ajax下載，包括axios、fetch等都是相同的，代碼如下：
const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://www.baidu.com')
xhr.send()
xhr.onload = function () {
const blob = new Blob([xhr.response], { type: 'text/html' })
const a = document.createElement('a')
a.href = URL.createObjectURL(blob)
a.download = 'baidu.html'
a.click()
}
這裏就不講和XMLHttpRequest相關的知識了，只講和文件下載相關的部分。
這裏主要的邏輯是當我們的請求成功後，我們會拿到響應體的response，這個response就是我們要下載的內容，然後我們把它轉換成blob對象，然後通過URL.createObjectURL來創建一個url，然後通過a標籤的download屬性來實現文件下載。
這裏的知識點就有兩個，一個是blob對象，一個是URL.createObjectURL。
5.1 blob
下面是blob對象的定義，來自 MDN[2]：
Blob對象表示一個不可變、原始數據的類文件對象。它的數據可以按文本或二進制的格式進行讀取，也可以轉換成ReadableStream來用於數據操作。
Blob表示的不一定是JavaScript原生格式的數據。File接口基於Blob，繼承了blob的功能並將其擴展以支持用戶系統上的文件。
blob對象是html5新增的對象，它的作用是用來存儲二進制數據的，比如圖片、視頻、音頻等，它的使用方法如下：
/**
* @param {Array} array 二進制數據
* @param {Object} options 配置項
* @param {String} options.type 文件類型，它代表了將會被放入到 blob 中的數組內容的 MIME 類型。
* @param {String} options.endings 用於指定包含行結束符\n的字符串如何被寫入。默認爲transparent，表示不會修改行結束符。還可以指定爲native，表示會將\n轉換爲\r\n。
*/
const blob = new Blob([], { type: '' })
這裏主要關注的是type屬性，默認情況下，blob對象是沒有type屬性的，那麼這個Blob就是一個無類型的Blob，文件不會損毀，但是無法被正常識別。
5.2 URL.createObjectURL
下面來自 MDN[3]：
URL.createObjectURL() 靜態方法會創建一個 DOMString，其中包含一個表示參數中給出的對象的 URL。這個 URL 的生命週期和創建它的窗口中的 document 綁定。這個新的 URL 對象表示指定的 File 對象或 Blob 對象。
這個方法是用來創建一個url的，它的作用是把一個blob對象轉換成一個url，這個url可以用來下載文件，也可以用來預覽文件，代碼如下：
const url = URL.createObjectURL(blob)
這裏需要注意的是，這個url的生命週期和創建它的窗口中的document綁定，也就是說，當我們的document被銷燬後，這個url就會失效，所以我們需要在合適的時機銷燬它，代碼如下：
URL.revokeObjectURL(url)
回到我們剛纔下載的問題，我們是通過blob對象來解決，但是我們的type屬性是寫死的，如果在文件類型是確定的情況下是沒問題的，但是如果這個接口就是下載文件的接口，文件可能是各種類型的，我們應該怎麼處理？
這裏的沒有正確答案，第一個可以和接口提供者進行協商，協商方案是不確定的，第二就是通過response的header來獲取文件的type，也是我們要講的：
const type = response.headers['content-type']
const blob = new Blob([response.data], { type })
這裏我們通過response的header來獲取type，然後再創建blob對象，這樣就可以正確的下載文件了。
其實content-type也可能是application/octet-stream，這個時候我們就需要通過file-type來獲取文件的type了。
下面的代碼是通過file-type來獲取文件的type：
import {fileTypeFromStream} from 'file-type';
const type = await fileTypeFromStream(response.body);
const blob = new Blob([response.data], { type })
file-type的使用可以參考這裏 [4]。
6. 總結
上面的方案這麼多，其實最終還是落到a標籤上，所以不管是通過瀏覽器的內置行爲進行下載，還是通過ajax進行下載，文件下載的最終還是瀏覽器的行爲。
關於本文
作者：田八
https://juejin.cn/post/7156427561302982670
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/Yk8aepw9YwPwXeclHUgF0A