最近在捣鼓一个类似云盘的私人项目,采用的是前后端分离的方法。既然是网盘,那自然是要有下载选项,又因为前后端分离,自然不能通过访问后端去获取下载链接。经过一番考量之后还是选择的js中的blob
Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。(数据类型Blob对象是在HTML5中,新增的File API。)
如何构建Blob对象
Blob(blobParts[, options])
返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。
Blob构造函数接受两个参数:
1.参数data是一组数据,所以必须是数组,即使只有一个字符串也必须用数组装起来
2.参数options是对这一Blob对象的配置属性
Blob对象的属性
Blob.size
只读
Blob 对象中所包含数据的大小(字节)。
Blob.type
只读
一个字符串,表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知,则该值为空字符串。
Blob对象的方法
Blob.slice([start[, end[, contentType]]])
返回一个新的 Blob 对象,包含了源 Blob 对象中指定范围内的数据。
Blob.stream()
返回一个能读取blob内容的 ReadableStream。
Blob.text()
返回一个promise且包含blob所有内容的UTF-8格式的 USVString。
Blob.arrayBuffer()
返回一个promise且包含blob所有内容的二进制格式的 ArrayBuffer
使用实例
使用ajax向后端发送请求
this.axios({
method: "post",
url: "/api/download.php",
data: {},
responseType: "blob"
}).then(row => {
this.download(row.data, row.filename);
});
后端需要返回的是该文件的二进制文件流,而且一定要带上heard头
download函数
download(data, filename) {
if (!data) {
return;
}
let blob = new Blob([data]);
let fileName = filename;
if ("download" in document.createElement("a")) {
// 不是IE浏览器
let url = window.URL.createObjectURL(blob);
let link = document.createElement("a");
link.style.display = "none";
link.href = url;
link.setAttribute("download", fileName);
document.body.appendChild(link);
link.click();
document.body.removeChild(link); // 下载完成移除元素
window.URL.revokeObjectURL(url); // 释放掉blob对象
} else {
// IE 10+
window.navigator.msSaveBlob(blob, fileName);
}
}
Comments | NOTHING