今天帶來的主題是關于文件下載，通過本文帶你領略文件下載的奧秘。本文會花費你較長的時間閱讀，建議先收藏/點贊，然后查看你感興趣的部分，平時也可以充當當做字典的效果來查詢。

:) 不整不知道，一整，居然整出這么多情況，我只是想簡單地做個頁面仔。

前言

一圖覽全文，可以先看看大綱適不適合自己，如果你喜歡則繼續往下閱讀。

一文了解文件下載

這一節呢，主要介紹一些前置知識，對一些基礎知識的介紹，如果你覺得你是這個。??????，你可以跳過前言。

和榮耀王者說你嘛呢？_榮耀_王者表情

前端的文件下載主要是通過 ，再加上 download屬性,有了它們讓我們的下載變得簡單。

download此屬性指示瀏覽器下載 URL 而不是導航到它，因此將提示用戶將其保存為本地文件。如果屬性有一個值，那么此值將在下載保存過程中作為預填充的文件名(如果用戶需要，仍然可以更改文件名)。此屬性對允許的值沒有限制，但是 / 和 \ 會被轉換為下劃線。大多數文件系統限制了文件名中的標點符號，故此，瀏覽器將相應地調整建議的文件名。( 摘自 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a)

注意:

• 此屬性僅適用于同源 URL。
• 盡管 HTTP URL 需要位于同一源中，但是可以使用 blob: URL 和 data: URL ，以方便用戶下載使用 JavaScript 生成的內容(例如使用在線繪圖 Web 應用程序創建的照片)。

因此下載 url 主要有三種方式。(本文大部分以 blob 的方式進行演示)

image-20200830153314861

兼容性

可以看到它的兼容性也非常的可觀(https://www.caniuse.com/#search=download)

image-20200817232216749

為了避免很多代碼的重復性，因為我抽離出了幾個公共函數。(該部分可跳過，名字都比較可讀，之后若是遇到不明白則可以在這里尋找)

export?function?downloadDirect(url)?{
????const?aTag?=?document.createElement('a');
????aTag.download?=?url.split('/').pop();
????aTag.href?=?url;
????aTag.click()
}
export?function?downloadByContent(content,?filename,?type)?{
????const?aTag?=?document.createElement('a');
????aTag.download?=?filename;
????const?blob?=?new?Blob([content],?{?type?});
????const?blobUrl?=?URL.createObjectURL(blob);
????aTag.href?=?blobUrl;
????aTag.click();
????URL.revokeObjectURL(blob);
}
export?function?downloadByDataURL(content,?filename,?type)?{
????const?aTag?=?document.createElement('a');
????aTag.download?=?filename;
????const?dataUrl?=?`data:${type};base64,${window.btoa(unescape(encodeURIComponent(content)))}`;
????aTag.href?=?dataUrl;
????aTag.click();
}
export?function?downloadByBlob(blob,?filename)?{
????const?aTag?=?document.createElement('a');
????aTag.download?=?filename;
????const?blobUrl?=?URL.createObjectURL(blob);
????aTag.href?=?blobUrl;
????aTag.click();
????URL.revokeObjectURL(blob);
}
export?function?base64ToBlob(base64,?type)?{
????const?byteCharacters?=?atob(base64);
????const?byteNumbers?=?new?Array(byteCharacters.length);
????for?(let?i?=?0;?i?????????byteNumbers[i]?=?byteCharacters.charCodeAt(i);
????}
????const?buffer?=?Uint8Array.from(byteNumbers);
????const?blob?=?new?Blob([buffer],?{?type?});
????return?blob;
}

?????????????????????????????

(手動給不看以上內容的大佬畫分割線)

??

所有示例Github地址: ?https://github.com/hua1995116/node-demo/tree/master/file-download

在線Demo: https://qiufeng.blue/demo/file-download/index.html

前端文件下載

后端

本文后端所有示例均以 koa / 原生 js 實現。

后端返回文件流

這種情況非常簡單，我們只需要直接將后端返回的文件流以新的窗口打開，即可直接下載了。

//?前端代碼
<button?id="oBtnDownload">點擊下載button>
<script>
oBtnDownload.onclick?=?function(){window.open('http://localhost:8888/api/download?filename=1597375650384.jpg',?'_blank')
}script>
//?后端代碼
router.get('/api/download',?async?(ctx)?=>?{
????const?{?filename?}?=?ctx.query;
????const?fStats?=?fs.statSync(path.join(__dirname,?'./static/',?filename));
????ctx.set({
????????'Content-Type':?'application/octet-stream',
????????'Content-Disposition':?`attachment;?filename=${filename}`,
????????'Content-Length':?fStats.size
????});
????ctx.body?=?fs.readFileSync(path.join(__dirname,?'./static/',?filename));
})

能夠讓瀏覽器自動下載文件，主要有兩種情況:

一種為使用了Content-Disposition屬性。

我們來看看該字段的描述。

在常規的HTTP應答中，Content-Disposition 響應頭指示回復的內容該以何種形式展示，是以內聯的形式(即網頁或者頁面的一部分)，還是以附件的形式下載并保存到本地 ? --- 來源 MDN(https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Disposition)

再來看看它的語法

Content-Disposition:?inline
Content-Disposition:?attachment
Content-Disposition:?attachment;?filename="filename.jpg"

很簡單，只要設置成最后一種形態我就能成功讓文件從后端進行下載了。

另一種為瀏覽器無法識別的類型

例如輸入 http://localhost:8888/static/demo.sh，瀏覽器無法識別該類型，就會自動下載。

不知道小伙伴們有沒有遇到過這樣的一個情況，我們輸入一個正確的靜態 js 地址，沒有配置Content-Disposition，但是卻會被意外的下載。

例如像以下的情況。

2020-08-30-17.01.52006r3PQBjw1fav4dsikh6j308c0g5gm1

這很可能是由于你的 nginx 少了這一行配置.

include?mime.types;

導致默認走了 application/octet-stream，瀏覽器無法識別就下載了文件。

后端返回靜態站點地址

通過靜態站點下載，這里要分為兩種情況，一種為可能該服務自帶靜態目錄，即為同源情況，第二種情況為適用了第三方靜態存儲平臺，例如阿里云、騰訊云之類的進行托管，即非同源(當然也有些平臺直接會返回)。

同源

同源情況下是非常簡單，先上代碼，直接調用一下函數就能輕松實現下載。

import?{downloadDirect}?from?'../js/utils.js';
axios.get('http://localhost:8888/api/downloadUrl').then(res?=>?{
????????if(res.data.code?===?0)?{
????????????downloadDirect(res.data.data.url);
????????}
})

非同源

我們也可以從 MDN 上看到，雖然 download 限制了非同源的情況，但是！！但是！！但是可以使用 blob: URL 和 data: URL ，因此我們只要將文件內容進行下載轉化成 blob 就可以了。

整個過程如下

image-20200830174735143<button?id="oBtnDownload">點擊下載button>
????<script?type="module">import?{downloadByBlob}?from?'../js/utils.js';function?download(url)?{
????????????axios({method:?'get',
????????????????url,responseType:?'blob'
????????????}).then(res?=>?{
????????????????downloadByBlob(res.data,?url.split('/').pop());
????????????})?
????????}
????????oBtnDownload.onclick?=?function(){
???????????axios.get('http://localhost:8888/api/downloadUrl').then(res?=>?{if(res.data.code?===?0)?{
????????????????????download(res.data.data.url);
????????????????}
????????????})
????????}script>

現在非同源的也可以愉快地下載啦。

后端返回字符串(base64)

有時候我們也會遇到一些新手后端返回字符串的情況，這種情況很少見，但是來了我們也不慌，順便可以向后端小哥秀一波操作，不管啥數據，咱都能給你下載下來。

ps: 前提是安全無污染的資源 :) ?, 正經文章的招牌閃閃發光。

這種情況下，我需要模擬下后端小哥的騷操作，因此有后端代碼。

994b6f2egy1fgryfevtpvj208c08cmxd

核心過程

image-20200830174752476//?node?端
router.get('/api/base64',?async?(ctx)?=>?{
????const?{?filename?}?=?ctx.query;
????const?content?=?fs.readFileSync(path.join(__dirname,?'./static/',?filename));
????const?fStats?=?fs.statSync(path.join(__dirname,?'./static/',?filename));
????console.log(fStats);
????ctx.body?=?{
????????code:?0,
????????data:?{
????????????base64:?content.toString('base64'),
????????????filename,
????????????type:?mime.getType(filename)
????????}
????}
})
//?前端
<button?id="oBtnDownload">點擊下載button>
<script?type="module">import?{base64ToBlob,?downloadByBlob}?from?'../js/utils.js';function?download({?base64,?filename,?type?})?{const?blob?=?base64ToBlob(blob,?type);
????downloadByBlob(blob,?filename);
}
oBtnDownload.onclick?=?function(){
????axios.get('http://localhost:8888/api/base64?filename=1597375650384.jpg').then(res?=>?{if(res.data.code?===?0)?{
????????????download(res.data.data);
????????}
????})
}script>

思路其實還是利用了我們上面說的 標簽。但是在這個步驟前，多了一個步驟就是，需要將我們的 base64 字符串轉化為二進制流，這個東西，在我的前一篇文件上傳中也常常提到，畢竟文件就是以二進制流的形式存在。不過也很簡單，js 擁有內置函數 atob。極大地提高了我們轉換的效率。

純前端

上面介紹借助后端來完成文件下載的相關方法，接下來我們來介紹介紹純前端來完成文件下載的一些方法。

方法一: ?blob: URL

image-20200831230800538

方法二: data: URL

image-20200831230810963

由于 data:URL 會有長度的限制，因此下面的所有例子都會采用 blob 的方式來進行演示。

json/text

下載text和json非常的簡單，可以直接構造一個 Blob。

Blob(blobParts[,?options])
返回一個新創建的 Blob 對象，其內容由參數中給定的數組串聯組成。
//?html
<textarea?name=""?id="text"?cols="30"?rows="10">textarea>
<button?id="textBtn">下載文本button>
<p>p>
<textarea?name=""?id="json"?cols="30"?rows="10"?disabled>
{
????"name":?"秋風的筆記"
}
textarea>
<button?id="jsonBtn">下載JSONbutton>
//js
import?{downloadByContent,?downloadByDataURL}?from?'../js/utils.js';
textBtn.onclick?=?()?=>?{
????????const?value?=?text.value;
????????downloadByContent(value,?'hello.txt',?'text/plain');
????//?downloadByDataURL(value,?'hello.txt',?'text/plain');
}
jsonBtn.onclick?=?()?=>?{
????????const?value?=?json.value;
????????downloadByContent(value,?'hello.json',?'application/json');
?????//?downloadByDataURL(value,?'hello.json',?'application/json');
}

效果圖

2020-08-30-17.53.32

注釋代碼為 data:URL 的展示部分，由于是第一個例子，因此我講展示代碼，后面都省略了，但是你也可以通過調用 downloadByDataURL 方法，找不到該方法的定義請滑到文章開頭哦~

excel

excel 可以說是我們部分前端打交道很深的一個場景，什么數據中臺，天天需要導出各種報表。以前都是前端請求后端，來獲取一個 excel 文件地址。現在讓我們來展示下純前端是如何實現下載excel。

簡單excel

表格長這個模樣，比較簡陋的形式

image-20200829170347728const?template?=?'
????????????+'xmlns:x="urn:schemas-microsoft-com:office:excel"?'
????????????+'xmlns="http://www.w3.org/TR/REC-html40">'
????????????+''
????????????+''
????????????+'{table}'
????????????+'';const?context?=?template.replace('{table}',?document.getElementById('excel').innerHTML);
????downloadByContent(context,?'qiufengblue.xls',?'application/vnd.ms-excel');

但是編寫并不復雜，依舊是和我們之前一樣，通過構造出 excel 的格式，轉化成 blob 來進行下載。

最終導出的效果

image-20200829170625763

element-ui 導出表格

沒錯，這個就是 element-ui 官方table 的例子。

image-20200829170543891

導出效果如下，可以說非常完美。

image-20200829170912128

這里我們用到了一個插件 https://github.com/SheetJS/sheetjs

使用起來非常簡單。

<template>
??????<el-table?id="ele"?border?:data="tableData"?style="width:?100%">
????????<el-table-column?prop="date"?label="日期"?width="180">
????????el-table-column>
????????<el-table-column?prop="name"?label="姓名"?width="180">
????????el-table-column>
????????<el-table-column?prop="address"?label="地址">
????????el-table-column>
??????el-table>
??????<button?@click="exportExcel">導出excelbutton>
template>
<script>
...
methods:?{
??exportExcel()?{let?wb?=?XLSX.utils.table_to_book(document.getElementById('ele'));
?????XLSX.writeFile(wb,?'qiufeng.blue.xlsx');
?}
}
...script>

完美表情

word

講完了 excel我們再來講講 word 這可是 office 三劍客另外一大利器。這里我們依舊是利用上述的 blob 的方法進行下載。

簡單示例

2020-08-29-20.13.25

代碼展示

exportWord.onclick?=?()?=>?{
????const?template?=?'
????????????+'xmlns:x="urn:schemas-microsoft-com:office:word"?'
????????????+'xmlns="http://www.w3.org/TR/REC-html40">'
????????????+''
????????????+''
????????????+'{table}'
????????????+'';const?context?=?template.replace('{table}',?document.getElementById('word').innerHTML);
????downloadByContent(context,?'qiufeng.blue.doc',?'application/msword');
}

效果展示

image-20200830164208184

使用 docx.js插件

如果你想有更高級的用法，可以使用 docx.js這個庫。當然用上述方法也是可以高級定制的。

代碼

<button?type="button"?onclick="generate()">下載wordbutton>

????<script>async?function?generate()?{const?res?=?await?axios({method:?'get',url:?'http://localhost:8888/static/1597375650384.jpg',responseType:?'blob'
????????????})const?doc?=?new?docx.Document();const?image1?=?docx.Media.addImage(doc,?res.data,?300,?400)
????????????doc.addSection({properties:?{},children:?[new?docx.Paragraph({children:?[new?docx.TextRun("歡迎關注[秋風的筆記]公眾號").break(),new?docx.TextRun("").break(),new?docx.TextRun("定期發送優質文章").break(),new?docx.TextRun("").break(),new?docx.TextRun("美團點評2020校招-內推").break(),
????????????????????????],
????????????????????}),new?docx.Paragraph(image1),
????????????????],
????????????});?
????????????docx.Packer.toBlob(doc).then(blob?=>?{console.log(blob);
????????????????saveAs(blob,?"qiufeng.blue.docx");console.log("Document?created?successfully");
????????????});
????????}script>

效果(沒有打廣告...隨便找了張圖，強行不承認系列)

9150e4e5ly1fl8qavz6quj20hs0hsjvl2020-08-30-18.32.09

zip下載

前端壓縮還是非常有用的，在一定的場景下，可以節省流量。而這個場景比較使用于，例如前端打包圖片下載、前端打包下載圖標。

一開始我以為我 https://tinypng.com/ 就是用了這個，結果我發現我錯了...仔細一想，因為它壓縮好的圖片是存在后端的，如果使用前端打包的話，反而要去請求所有壓縮的圖片從而來獲取圖片流。如果用后端壓縮話，可以有效節省流量。嗯。。。失敗例子告終。

后來又以為https://www.iconfont.cn/打包下載圖標的時候，使用了這個方案....發現....我又錯了...但是我們分析一下.

image-20200829204540440

它官網都是 svg 渲染的圖標，對于 svg 下載的時候，完全可以使用前端打包下載。但是，它還支持 font 以及 jpg 格式，所以為了統一，采用了后端下載，能夠理解。那我們就來實現這個它未完成的功能，當然我們還需要用到一個插件，就是 jszip。

這里我從以上找了兩個 svg 的圖標。

image-20200829204937044

實現代碼

download.onclick?=?()?=>?{
????????const?zip?=?new?JSZip();
????????const?svgList?=?[{
????????????id:?'demo1',
????????},?{
????????????id:?'demo2',
????????}]
????????svgList.map(item?=>?{
????????????zip.file(item.id?+?'.svg',?document.getElementById(item.id).outerHTML);
????????})
????????zip.generateAsync({?
????????????type:?'blob'
????????}).then(function(content)?{
????????????//?下載的文件名
????????????var?filename?=?'svg'?+?'.zip';
????????????//?創建隱藏的可下載鏈接
????????????var?eleLink?=?document.createElement('a');
????????????eleLink.download?=?filename;
????????????//?下載內容轉變成blob地址
????????????eleLink.href?=?URL.createObjectURL(content);
????????????//?觸發點擊
????????????eleLink.click();
????????????//?然后移除
????????});
????}
2020-08-29-20.52.42

查看文件夾目錄，已經將 SVG 打包下載完畢。

image-20200829205329532

瀏覽器文件系統(實驗性)

image-20200817234129788

在我電腦上都有這么一個瀏覽器，用來學習和調試 chrome 的最新新特性, 如果你的電腦沒有，建議你安裝一個。

玩這個特性需要打開 chrome 的實驗特性 chrome://flags => #native-file-system-api => enable, 因為實驗特性都會伴隨一些安全或者影響原本的渲染的行為，因此我再次強烈建議，下載一個金絲雀版本的 chrome 來進行玩耍。

<textarea?name=""?id="textarea"?cols="30"?rows="10">textarea>
<p><button?id="btn">下載button>p>
<script>
????btn.onclick?=?async?()?=>?{const?handler?=?await?window.chooseFileSystemEntries({type:?'save-file',accepts:?[{description:?'Text?file',extensions:?['txt'],mimeTypes:?['text/plain'],
????????????}],
????????});const?writer?=?await?handler.createWritable();await?writer.write(textarea.value);await?writer.close();
????}script>

實現起來非常簡單。卻飛一般的感覺。

2020-08-18-00.13.29

其他場景

H5文件下載

一般在 h5 下載比較多的是 pdf 或者是 apk 的下載。

Android

在安卓瀏覽器中，瀏覽器直接下載文件。

ios

由于ios的限制，無法進行下載，因此，可以使用復制 url ，來代替下載。

import?{downloadDirect}?from?'../js/utils.js';
const?btn?=?document.querySelector('#download-ios');
if?(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent))?{
????const?clipboard?=?new?ClipboardJS(btn);
????clipboard.on('success',?function?()?{
????????alert('已復制鏈接，打開瀏覽器粘貼鏈接下載');
????});
????clipboard.on('error',?function?(e)?{
????????alert('系統版本過低，復制鏈接失敗');
????});
}?else?{
????btn.onclick?=?()?=>?{
????????downloadDirect(btn.dataset.clipboardText)
????}
}

更多

對于 apk 等下載包可以使用這個包(本人暫時沒有試驗，接觸不多，回頭熟悉了再回來補充。)

https://github.com/jawidx/web-launch-app

image-20200830145258473

大文件的分片下載

最近在開發媒體流相關的工作的時候，發現在加載 mp4 文件的時候，發現了一個比較有意思的現象，視頻流并不需要將整個 mp4 下載完才進行播放，并且伴隨了很多狀態碼為 206 的請求，乍一看有點像流媒體(HLS等)的韻味。

2020-08-29-21.31.29

覺得這個現象非常的有意思，他能夠分片地加載資源，這對于體驗或者是流量的節省都是非常大的幫助。最終發現它帶了一個名為 Range 的頭。我們來看看 MDN 的解釋。

The Range 是一個請求首部，告知服務器返回文件的哪一部分。在一個 Range 首部中，可以一次性請求多個部分，服務器會以 multipart 文件的形式將其返回。如果服務器返回的是范圍響應，需要使用 206 Partial Content 狀態碼。?摘自 MDN

語法

Range:?=-
Range:?=-
Range:?=-,?-
Range:?=-,?-,?-

Node實現

既然我們知道了它的原理，就來自己實現一下。

router.get('/api/rangeFile',?async(ctx)?=>?{
????const?{?filename?}?=?ctx.query;
????const?{?size?}?=?fs.statSync(path.join(__dirname,?'./static/',?filename));
????const?range?=?ctx.headers['range'];
????if?(!range)?{
????????ctx.set('Accept-Ranges',?'bytes');
????????ctx.body?=?fs.readFileSync(path.join(__dirname,?'./static/',?filename));
????????return;
????}
????const?{?start,?end?}?=?getRange(range);
????if?(start?>=?size?||?end?>=?size)?{
????????ctx.response.status?=?416;
????????ctx.set('Content-Range',?`bytes?*/${size}`);
????????ctx.body?=?'';
????????return;
????}
????ctx.response.status?=?206;
????ctx.set('Accept-Ranges',?'bytes');
????ctx.set('Content-Range',?`bytes?${start}-${end???end?:?size?-?1}/${size}`);
????ctx.body?=?fs.createReadStream(path.join(__dirname,?'./static/',?filename),?{?start,?end?});
})

Nginx實現

發現 nginx 不需要寫任何代碼就默認支持了 range 頭，想著我一定知道它到底是支持，還是加入了什么模塊，或者是我默認開啟了什么配置，找了半天沒有找到什么額外的配置。

3630px-Nginx_logo-1

正當我準備放棄的時候，靈光一現，去看看源碼吧，說不定會有發現，去查了 nginx 源碼相關的內容，用了慣用的反推方式，才發現原來是max_ranges這個字段。

https://github.com/nginx/nginx/blob/release-1.13.6/src/http/modules/ngx_http_range_filter_module.c#L166

這也怪我一開始文檔閱讀不夠仔細，浪費了大量的時間。

:) 其實我對 nginx 源碼也不熟悉，這里可以用個小技巧，直接在源碼庫 搜索 206 然后 發現了一個宏命令

#define?NGX_HTTP_PARTIAL_CONTENT???????????206

然后順藤摸瓜，直接找到這個宏命令NGX_HTTP_PARTIAL_CONTENT用到的地方，這樣一步一步就慢慢能找到我們想要的。

默認 nginx 是自動開啟 range 頭的, 如果不需要配置，則配置 max_range: 0;

Nginx 配置文檔 http://nginx.org/en/docs/http/ngx_http_core_module.html#max_ranges

總結

我們可以來總結一下，其實全文主要講了(xbb)兩個核心的知識，一個是 blob 一個a 標簽，另外還要注意對于大文件，服務器的優化策略，可以通過 Range 來分片加載。

image-20200830181216353

參考資料

https://github.com/dolanmiu/docx

https://github.com/SheetJS/sheetjs

https://juejin.im/post/6844903763359039501

最后

如果我的文章有幫助到你，希望你也能幫助我，歡迎關注我的微信公眾號 前端有的玩，回復好友 二次，可加個人微信并且加入交流群，前端有的玩?將一直陪伴你的左右。

總結

以上是生活随笔為你收集整理的stream模式不能接受blob文件_一文带你层层解锁文件下载的奥秘的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。