1:使用背景
需要下载一个zip格式文件到本地,保存解压到本地,然后删除zip文件。
2:遇到的难点
在网上找到的例子都是使用浏览器的API进行保存,使用浏览器的API保存的话就会弹出windos文件管理器,由于很少使用JS 进行开发。导致这里被卡住,这时候一位大神出场,帮忙解决了这个问题。下面就讲讲自己学到的知识点。
3:对应API的理解
(1) : XMLHttpRequest
var req = new XMLHttpRequest(); //new 一个 XMLHttpRequest对象。
req .open(method, url);
req .open(method, url, async);
req .open(method, url, async, user);
req .open(method, url, async, user, password);
method 要使用的HTTP方法,比如「GET」、「POST」、「PUT」、「DELETE」、等。对于非HTTP(S) URL被忽略。
url :一个DOMString表示要向其发送请求的URL。
async 可选 一个可选的布尔参数,默认为true,表示要不要异步执行操作。如果值为false,send()方法直到收到答复前不会返回。如果true ,已完成事务的通知可供事件监听器使用。如果multipart属性为true则这个必须为true,否则将引发异常。
user 可选 可选的用户名用于认证用途;默认为null。
password 可选 可选的密码用于认证用途,默认为null。
(2): XMLHttpRequest.responseType 属性是一个枚举值,返回响应的类型。 它还允许作者将响应类型更改为一个"arraybuffer", "blob", "document", "json", 或 "text" 。如果将一个空字符串设置为responseType的值,则将其假定为类型“text”。
req.responseType= "blob"; 刚开始参考网上的例子,没有具体的看对应的API ,使用了blob类型。饶了挺大的一个弯才实现了对应的效果。
(3):下面写一下对blob的介绍:
Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
要从其他非blob对象和数据构造一个Blob,请使用 Blob()构造函数。要创建包含另一个blob数据的子集blob,请使用 slice()方法。要获取用户文件系统上的文件对应的Blob对象,请参阅 File文档。
然后就查看file文档 使用了 FileReader 对 返回的blob 对象进行操作 var fr = new FileReader();
fr.readAsArrayBuffer(rsp); 因为这个操作是异步的,需要监听一个函数来查看返回结果。
FileReader 接口提供的readAsArrayBuffer() 方法用于启动读取指定的 Blob 或File 内容。当读取操作完成时,readyState 变成 DONE(已完成),并触发 loadend 事件,同时result 属性中将包含一个ArrayBuffer 对象以表示所读取文件的数据。
fr.onload = function(e) {
var int8View = new Uint8Array(fr.result);
}
(4): nodejs fs 模块的 fs.writeFile(file, data[, options], callback) writeFile函数 支持写入 string | Buffer | Uint8Array 这三种格式的数据,所以就转换成 Uint8Array格式的数据,然后写入对应的绝对路径。
(5) : 上文写到responseType 可以指定arraybuffer 类型,就不用上文 FileReader 这一系列的API了
var data = new Uint8Array(rsp.response); 有一种一顿操作猛如虎,一看战绩0-5的感觉。