前端培训-初级阶段-场景实战（2019-06-06）-下载文件&下载进度

下载文件上面已经实现了，那我们先说说如何显示进度条。

其实浏览器也是有进度条的，但是咱们拿不到。那我们就来模拟一下载，然后显示进度条。

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