js流与下载

触发下载

一般会在页面点击链接进行下载，想下载一张图片怎么办？

<a download="fileName.jpg" href="http://xxx/xxx.jpg">点击下载图片</a>

属性分析：

• download: 必须，代表这个a标签的动作是下载，value是待下载的文件名
• href： 必须，代表下载的资源路径，点击下载按钮后请求到的资源会在内存中通过这个链接表示，后面会讲到这个链接怎么生成。

下载大文件

下载文件一把会通过流操作，速度快。

ArrayBuffer

通过ArrayBuffer表示流

// 创建有2个字节的buffer
const buffer = new ArrayBuffer(2);

有了buffer，如何往里边填充数据呢？

TypedArray或DataView

常用TypedArray有

• Int8Array、Uint8Array
• Int16Array、Uint16Array
• Int32Array、Uint32Array
• Float32Array、Float64Array
• Uint8C

注意上面的Uint 不是Unit
以Int8Array为例，下面新建包含2个字节的ArrayBuffer，接着用Int8Array（1值1字段）作为视图展示他，所以，每往Int8Array中写入一个值，占用ArrayBuffer1个字节

const buffer = new ArrayBuffer(2);
const x1 = new Int8Array(buffer);

x1[0] = 3;
x1[1] = 4;

console.log(x1 instanceof Object);
console.log(Object.keys(x1));

// 输出
true
[ '0', '1' ]

可见TypedArray是个Object.
而Int8Array表示8 位带符号整数，所以它的范围是0~{符号位}1 111 111，即0~127，所以会按照输入值 num & 127保存.

createObjectURL

上一节说完了流，那用流怎么下载呢？a标签的href也不能直接指向这个流吧，所以要有一个将流转换为内存中数据的链接，这里需要createObjectURL

URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

<a download="fileName.jpg" href="http://xxx/xxx.jpg">点击下载图片</a>
href = URL.createObjectURL(blob)

从最后一句" 这个新的URL 对象表示指定的 File 对象或 Blob 对象"可见，createObjectURL接收File或Blob对象，那如何将流转换为这俩呢？

Blob

Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

new Blob([arrayBuffer], { type })

其中res表示流，type表示文件的mine类型

revokeObjectURL

下载完成后，就不需要将刚下载的数据保存在内容中了，可以用下面方法释放掉

URL.revokeObjectURL() 静态方法用来释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。当你结束使用某个 URL 对象之后，应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。

URL.revokeObjectURL(href)

注意href参数是URL.createObjectURL(blob)生成的值.