最近在捣鼓一个类似云盘的私人项目,采用的是前后端分离的方法。既然是网盘,那自然是要有下载选项,又因为前后端分离,自然不能通过访问后端去获取下载链接。经过一番考量之后还是选择的 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