介绍
Blob对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。
Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
要从其他非blob对象和数据构造一个 Blob，请使用 Blob() 构造函数。要创建一个 blob 数据的子集 blob，请使用 slice() 方法。要获取用户文件系统上的文件对应的 Blob 对象，请参阅 File 文档。
参考
使用场景
1、分片上传
2、下载数据
3、Blob用作URL
4、Blob转换为Base64
5、图片压缩
6、生成PDF
文件下载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blob</title>
</head>
<img src="" alt="">
<body>
<script>
// let blob = new Blob(['daasdasdsad']);
// console.log(blob);
// 下载图片
let img = document.querySelector('img')
function downloadimg(url) {
let xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.responseType = "blob"
xhr.send();
xhr.onreadystatechange = () => {
if (xhr.readyState !== 4) {
return;
}
const status = xhr.status;
if ((status >= 200 && status < 300) || status === 304) {
let bloburl = URL.createObjectURL(xhr.response);
img.setAttribute("src", bloburl)
//创建a标签
const domA = document.createElement("a")
domA.innerText = "下载"
domA.setAttribute("download", '文件名字')
domA.setAttribute("href", bloburl)
document.body.appendChild(domA)
// domA.click();
} else {
console.log('request error');
}
};
}
downloadimg("https://i0.hdslb.com/bfs/sycp/creative_img/202012/51be27723baa50aa525376c20d35256e.jpg");
</script>
</body>
</html>
网友评论