下載文件上面已經(jīng)實(shí)現(xiàn)了，那我們先說(shuō)說(shuō)如何顯示進(jìn)度條。

其實(shí)瀏覽器也是有進(jìn)度條的，但是咱們拿不到。那我們就來(lái)模擬一下載，然后顯示進(jìn)度條。

ajax 實(shí)現(xiàn)下載進(jìn)度條，測(cè)試地址-顯示進(jìn)度條

xhr = new XMLHttpRequest();
xhr.open("get", file1.url);
xhr.onprogress = (e)=>console.log(e)//e 就是一個(gè) ProgressEvent 對(duì)象，其中 loaded 是已下載的, total 是總大小。
xhr.send()

fetch 實(shí)現(xiàn)下載進(jìn)度條，測(cè)試地址-fetch顯示進(jìn)度條并下載
fetch 的實(shí)現(xiàn)上來(lái)說(shuō)有一些功能是沒有的，比如 abort、進(jìn)度等。那我們就需要去通過一些別的手段來(lái)模擬實(shí)現(xiàn)。
實(shí)現(xiàn)代碼如下，我們操作成讀流，然后統(tǒng)計(jì)長(zhǎng)度。

進(jìn)度條已經(jīng)顯示好了，那我們可以下載文件了。首先我們要分幾種情況

緩存下載（一個(gè)資源如果已經(jīng)下載完了，再次去訪問）

本地下載（資源已經(jīng)在瀏覽器中）

blob url 下載 如這種地址 blob:https://www.lilnong.top/deb4c297-821c-4545-9b23-0fbdd76890c7

base64 url 下載 如這種地址 data:application/octet-stream;base64,aGVsbG8gbGlub25n

  blob = new Blob(["hello linong"])
  freader = new FileReader()
  freader.readAsDataURL(blob)//將 blob 讀成 dataurl
  freader.onload=e=>console.log(freader.result)// 異步的，所以需要回調(diào)里面拿

無(wú)緩存下載（資源沒在本地，也沒有緩存）

情況就是上面幾種，那我們要做的其實(shí)就是統(tǒng)一一下流程

ajax 拉取數(shù)據(jù)（顯示進(jìn)度條）

緩存了數(shù)據(jù)，然后下載緩存（因?yàn)槭蔷彺?，所以秒下?/p>

瀏覽器緩存
我比較推薦用這個(gè)，因?yàn)槠渌姆桨付加?strong>大小或者兼容上的問題。但是這個(gè)緩存需要服務(wù)器設(shè)置需要走緩存。

bloburl 本地緩存下載
這個(gè)方案在移動(dòng)端異常，pc端正常，感興趣的小伙伴可以自己實(shí)現(xiàn)一下，畢竟學(xué)了這么多，得用起來(lái)才能變成自己的

dataurl 本地緩存下載
這個(gè)方案的支持會(huì)比 bloburl 好一點(diǎn)，但是只適用于小文件。

我們讓 ajax 直接返回 blob。然后構(gòu)建 bloburl 用于下載。

downloadFile2 = (url)=>{
    var xhr = new XMLHttpRequest();
    xhr.open("get", url);
    xhr.responseType="blob";//這是精髓
    xhr.onprogress = onprogress2;//下載進(jìn)度
    // .upload.onprogress 這個(gè)是上傳的時(shí)候的進(jìn)度
    xhr.onreadystatechange = ()=>{
        if(xhr.readyState == 4 && xhr.status == 200){
            nativeDownload(URL.createObjectURL(xhr.response))
        }
    }
    xhr.send()
}

如果是一些封裝過的 ajax，沒辦法使用 xhr.responseType="blob" 之類的，返回回來(lái)是字符串。那我們需要怎么出轉(zhuǎn)換呢？

blob 需要配合 FileReader 來(lái)讀取

blob to arrayBuffer （readAsArrayBuffer）
通用的、固定長(zhǎng)度的原始二進(jìn)制數(shù)據(jù)緩沖區(qū)

var fileReader = new FileReader();
fileReader.readAsArrayBuffer(xhr.response);//xhr.reponse 是 blob 類型
fileReader.onload = e=>console.log(fileReader.result);

blob to DataURL （readAsDataURL）

Base64 是一組相似的二進(jìn)制到文本（binary-to-text）的編碼規(guī)則，使得二進(jìn)制數(shù)據(jù)在解釋成 radix-64 的表現(xiàn)形式后能夠用 ASCII 字符串的格式表示出來(lái)。Base64 這個(gè)詞出自一種 MIME 數(shù)據(jù)傳輸編碼。 --MDN

blob to Text （readAsText）
以字符串表示所讀取的文件內(nèi)容

blob to BinaryString （readAsBinaryString）
文件的原始二進(jìn)制數(shù)據(jù)

arrayBuffer to blob
new Blob([arrayBuffer], {type: "image/jpeg"})

base64 to blob

(new Uint8Array(Array.from(atob(base64url.split(",")[1])).map(v=>v.charCodeAt()))).buffer
//base64url.split(",")[1] //截取不要 data:images/jpeg;base64, 這串
//atob //轉(zhuǎn)換成 BinaryString
//Array.from //轉(zhuǎn)換成數(shù)組
//map(v=>v.charCodeAt()) //轉(zhuǎn)換成對(duì)應(yīng)的 ascii 碼
//Uint8Array 轉(zhuǎn)換成 Uint8Array 然后輸出 buffer

BinaryString to blob
方案同上，因?yàn)樯厦娴囊彩寝D(zhuǎn)換成了BinaryString

Text to blob
ajax 默認(rèn)就是 Text 類型的返回值。這個(gè)我覺得是編碼類型的轉(zhuǎn)換，比如 utf-8 to ascii，目前我還沒找到好的實(shí)現(xiàn)方法。

之前就寫過一篇AJAX 的進(jìn)階使用（Blob、ArrayBuffer、FormData、Document、JSON、Text），里面講了這些支持的類型。
base64轉(zhuǎn)換上傳，也寫過這樣的。

前端目前需要操作的東西越來(lái)越多了。

在最上面那個(gè)問答里，有個(gè)庫(kù)去實(shí)現(xiàn) download 操作。實(shí)現(xiàn)原理可以自己去看看。

Data URLs --MDN

StringView

字符編碼中ASCII、Unicode和UTF-8的區(qū)別

String?.prototype?.char?CodeAt()

DOMString

rfc2397