触发下载
一般会在页面点击链接进行下载,想下载一张图片怎么办?
<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
中写入一个值,占用ArrayBuffer
1个字节
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)
生成的值.