下載文件上面已經實現了，那我們先說說如何顯示進度條。

其實瀏覽器也是有進度條的，但是咱們拿不到。那我們就來模擬一下載，然后顯示進度條。

ajax 實現下載進度條，測試地址-顯示進度條

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

fetch 實現下載進度條，測試地址-fetch顯示進度條并下載
fetch 的實現上來說有一些功能是沒有的，比如 abort、進度等。那我們就需要去通過一些別的手段來模擬實現。
實現代碼如下，我們操作成讀流，然后統計長度。

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

緩存下載（一個資源如果已經下載完了，再次去訪問）

本地下載（資源已經在瀏覽器中）

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)// 異步的，所以需要回調里面拿

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

情況就是上面幾種，那我們要做的其實就是統一一下流程

ajax 拉取數據（顯示進度條）

緩存了數據，然后下載緩存（因為是緩存，所以秒下）

瀏覽器緩存
我比較推薦用這個，因為其他的方案都有大小或者兼容上的問題。但是這個緩存需要服務器設置需要走緩存。

bloburl 本地緩存下載
這個方案在移動端異常，pc端正常，感興趣的小伙伴可以自己實現一下，畢竟學了這么多，得用起來才能變成自己的

dataurl 本地緩存下載
這個方案的支持會比 bloburl 好一點，但是只適用于小文件。

我們讓 ajax 直接返回 blob。然后構建 bloburl 用于下載。

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

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

blob 需要配合 FileReader 來讀取

blob to arrayBuffer （readAsArrayBuffer）
通用的、固定長度的原始二進制數據緩沖區

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

blob to DataURL （readAsDataURL）

Base64 是一組相似的二進制到文本（binary-to-text）的編碼規則，使得二進制數據在解釋成 radix-64 的表現形式后能夠用 ASCII 字符串的格式表示出來。Base64 這個詞出自一種 MIME 數據傳輸編碼。 --MDN

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

blob to BinaryString （readAsBinaryString）
文件的原始二進制數據

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 //轉換成 BinaryString
//Array.from //轉換成數組
//map(v=>v.charCodeAt()) //轉換成對應的 ascii 碼
//Uint8Array 轉換成 Uint8Array 然后輸出 buffer

BinaryString to blob
方案同上，因為上面的也是轉換成了BinaryString

Text to blob
ajax 默認就是 Text 類型的返回值。這個我覺得是編碼類型的轉換，比如 utf-8 to ascii，目前我還沒找到好的實現方法。

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

前端目前需要操作的東西越來越多了。

在最上面那個問答里，有個庫去實現 download 操作。實現原理可以自己去看看。

Data URLs --MDN

StringView

字符編碼中ASCII、Unicode和UTF-8的區別

String?.prototype?.char?CodeAt()

DOMString

rfc2397