前端文件下載的正確打開(kāi)方式

前端涉及到的文件下載還是很多應(yīng)用場(chǎng)景的，那么前端文件下載有多少種方式呢？每種方式有什么優(yōu)缺點(diǎn)呢？下面就來(lái)一一介紹。

1. a 標(biāo)簽
通過(guò)a標(biāo)簽的download屬性來(lái)實(shí)現(xiàn)文件下載，這種方式是最簡(jiǎn)單的，也是我們比較常用的方式，先來(lái)看示例代碼：

<a download="baidu.html">下載</a>

就上面的這個(gè)示例，我們點(diǎn)擊下載，發(fā)現(xiàn)是跳轉(zhuǎn)到了百度的首頁(yè)，并沒(méi)有真的下載文件。

因?yàn)閍標(biāo)簽下載只能下載同源的文件，如果是跨域的文件，這里包括圖片、音視頻等媒體文件，都是預(yù)覽，也無(wú)法下載。

上面的代碼是直接通過(guò)書(shū)寫(xiě)a標(biāo)簽來(lái)實(shí)現(xiàn)文件下載，我們也可以通過(guò)js來(lái)實(shí)現(xiàn)，代碼如下：

const a = document.createElement('a')
a.
a.download = 'baidu.html'
a.click()

效果和上面的一樣，都是跳轉(zhuǎn)到百度的首頁(yè)，沒(méi)有下載文件。

這里的重點(diǎn)是a標(biāo)簽的download屬性，這個(gè)屬性是HTML5新增的。

它的作用是指定下載的文件名，如果不指定，那么下載的文件名就會(huì)根據(jù)請(qǐng)求內(nèi)容的Content-Disposition來(lái)確定，如果沒(méi)有Content-Disposition，那么就會(huì)使用請(qǐng)求的URL的最后一部分作為文件名。

2. window.open
上面使用a標(biāo)簽的案例也可以通過(guò)window.open來(lái)實(shí)現(xiàn)，效果是一樣的，代碼如下：

window.open('http://www.baidu.com', '_blank')

這里的_blank是指定打開(kāi)的方式，如果不指定，那么就會(huì)在當(dāng)前頁(yè)面打開(kāi)，這里指定_blank，就是在新的頁(yè)面打開(kāi)。

同樣a標(biāo)簽的download屬性也是可以使用的，代碼如下：

window.open('http://www.baidu.com', '_blank', 'download=baidu.html')

當(dāng)然這種方式也是有缺陷的，對(duì)比于a標(biāo)簽，這種方式不能下載.html、.htm、.xml、.xhtml等文件，因?yàn)檫@些文件會(huì)被當(dāng)成html文件來(lái)處理，所以會(huì)直接在當(dāng)前頁(yè)面打開(kāi)。

同樣也不能下載跨域的文件，畢竟是window.open，不是window.download（window.download是假想）。

3. location.href
這種方式和window.open(url)是一樣的，代碼如下：

location.

這種方式擁有window.open的所有缺陷，所以不推薦使用，這里只當(dāng)作了解，所以不做過(guò)多的講解。

4. location.?其他屬性
這里的其他指代的都是能跳轉(zhuǎn)頁(yè)面的屬性，比如location.assign、location.replace、location.reload等，這些屬性都是可以實(shí)現(xiàn)文件下載的，代碼如下：

location.assign('http://www.baidu.com')
location.replace('http://www.baidu.com')
location.reload('http://www.baidu.com')

這里的location.reload是有點(diǎn)特殊的，它的作用是重新加載當(dāng)前頁(yè)面，但是它也可以接受一個(gè)參數(shù)，這個(gè)參數(shù)就是要跳轉(zhuǎn)的頁(yè)面，所以也可以實(shí)現(xiàn)文件下載。

當(dāng)然同location.href一樣，這些方式的缺點(diǎn)都一樣，同時(shí)還有屬于每個(gè)屬性自身的特性，這里只當(dāng)拓展知識(shí)，不做過(guò)多的講解。

5. XMLHttpRequest
這種方式就是我們常說(shuō)的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相關(guān)的知識(shí)了，只講和文件下載相關(guān)的部分。

這里主要的邏輯是當(dāng)我們的請(qǐng)求成功后，我們會(huì)拿到響應(yīng)體的response，這個(gè)response就是我們要下載的內(nèi)容，然后我們把它轉(zhuǎn)換成blob對(duì)象，然后通過(guò)URL.createObjectURL來(lái)創(chuàng)建一個(gè)url，然后通過(guò)a標(biāo)簽的download屬性來(lái)實(shí)現(xiàn)文件下載。

這里的知識(shí)點(diǎn)就有兩個(gè)，一個(gè)是blob對(duì)象，一個(gè)是URL.createObjectURL。

5.1 blob
下面是blob對(duì)象的定義，來(lái)自MDN：

Blob對(duì)象表示一個(gè)不可變、原始數(shù)據(jù)的類(lèi)文件對(duì)象。它的數(shù)據(jù)可以按文本或二進(jìn)制的格式進(jìn)行讀取，也可以轉(zhuǎn)換成 ReadableStream 來(lái)用于數(shù)據(jù)操作。

Blob表示的不一定是JavaScript原生格式的數(shù)據(jù)。File 接口基于 Blob，繼承了blob的功能并將其擴(kuò)展以支持用戶系統(tǒng)上的文件。

blob對(duì)象是html5新增的對(duì)象，它的作用是用來(lái)存儲(chǔ)二進(jìn)制數(shù)據(jù)的，比如圖片、視頻、音頻等，它的使用方法如下：

/**
 * @param {Array} array 二進(jìn)制數(shù)據(jù)
 * @param {Object} options 配置項(xiàng)
 *      @param {String} options.type 文件類(lèi)型，它代表了將會(huì)被放入到 blob 中的數(shù)組內(nèi)容的 MIME 類(lèi)型。
 *      @param {String} options.endings 用于指定包含行結(jié)束符\n的字符串如何被寫(xiě)入。默認(rèn)為transparent，表示不會(huì)修改行結(jié)束符。還可以指定為native，表示會(huì)將\n轉(zhuǎn)換為\r\n。
 */
const blob = new Blob([], { type: '' })

這里主要關(guān)注的是type屬性，默認(rèn)情況下，blob對(duì)象是沒(méi)有type屬性的，那么這個(gè)Blob就是一個(gè)無(wú)類(lèi)型的Blob，文件不會(huì)損毀，但是無(wú)法被正常識(shí)別。






5.2 URL.createObjectURL
下面來(lái)自MDN：

URL.createObjectURL() 靜態(tài)方法會(huì)創(chuàng)建一個(gè) DOMString，其中包含一個(gè)表示參數(shù)中給出的對(duì)象的 URL。這個(gè) URL 的生命周期和創(chuàng)建它的窗口中的 document 綁定。這個(gè)新的 URL 對(duì)象表示指定的 File 對(duì)象或 Blob 對(duì)象。

這個(gè)方法是用來(lái)創(chuàng)建一個(gè)url的，它的作用是把一個(gè)blob對(duì)象轉(zhuǎn)換成一個(gè)url，這個(gè)url可以用來(lái)下載文件，也可以用來(lái)預(yù)覽文件，代碼如下：

const url = URL.createObjectURL(blob)

這里需要注意的是，這個(gè)url的生命周期和創(chuàng)建它的窗口中的document綁定，也就是說(shuō)，當(dāng)我們的document被銷(xiāo)毀后，這個(gè)url就會(huì)失效，所以我們需要在合適的時(shí)機(jī)銷(xiāo)毀它，代碼如下：

URL.revokeObjectURL(url)

回到我們剛才下載的問(wèn)題，我們是通過(guò)blob對(duì)象來(lái)解決，但是我們的type屬性是寫(xiě)死的，如果在文件類(lèi)型是確定的情況下是沒(méi)問(wèn)題的，但是如果這個(gè)接口就是下載文件的接口，文件可能是各種類(lèi)型的，我們應(yīng)該怎么處理？

這里的沒(méi)有正確答案，第一個(gè)可以和接口提供者進(jìn)行協(xié)商，協(xié)商方案是不確定的，第二就是通過(guò)response的header來(lái)獲取文件的type，也是我們要講的：

const type = response.headers['content-type']

const blob = new Blob([response.data], { type })

這里我們通過(guò)response的header來(lái)獲取type，然后再創(chuàng)建blob對(duì)象，這樣就可以正確的下載文件了。

其實(shí)content-type也可能是application/octet-stream，這個(gè)時(shí)候我們就需要通過(guò)file-type來(lái)獲取文件的type了。

下面的代碼是通過(guò)file-type來(lái)獲取文件的type：

import {fileTypeFromStream} from 'file-type';

const type = await fileTypeFromStream(response.body);
const blob = new Blob([response.data], { type })

file-type的使用可以參考這里。

6. 總結(jié)
上面的方案這么多，其實(shí)最終還是落到a標(biāo)簽上，所以不管是通過(guò)瀏覽器的內(nèi)置行為進(jìn)行下載，還是通過(guò)ajax進(jìn)行下載，文件下載的最終還是瀏覽器的行為。

作者：田八

鏈接：https://juejin.cn/post/7156427561302982670

作者：田八


歡迎關(guān)注微信公眾號(hào) ：深圳灣碼農(nóng)