一個Blob對象就是一個包含有只讀原始數(shù)據(jù)的類文件對象铁坎，被瀏覽器“視同文件”鉴逞。File 接口基于Blob，繼承了Blob的功能,并且擴展支持了用戶計算機上的本地文件僵井。
Blob對象僅僅是一個可以設(shè)置MIME類型的礁击，二進制數(shù)據(jù)的容器盐杂，真正的業(yè)務(wù)功能還需要通過FileReader、URL哆窿、Canvas等對象實現(xiàn)
獲取Blob
通過<input type="file">即可獲取本地文件的Blob對象
imageSelector.addEventListener('change', (event) => {
const file = event.target.files[0];
console.log(file instanceof Blob);//true
});
創(chuàng)建Blob
1.通過構(gòu)造函數(shù)
var blob = new Blob(dataArray:Array<any>, opt:{type:string});
- dataArray：數(shù)組链烈，包含了要添加到Blob對象中的數(shù)據(jù)，數(shù)據(jù)可以是任意多個ArrayBuffer挚躯，ArrayBufferView强衡， Blob，或者 DOMString對象码荔。
- opt：對象漩勤，用于設(shè)置Blob對象的屬性（如：MIME類型）
2.通過Blob.slice()
Blob.slice(start:number, end:number, contentType:string)
- 此方法返回一個新的Blob對象，包含了原Blob對象中指定范圍內(nèi)的數(shù)據(jù)
3.通過canvas.toBlob()
var canvas = document.getElementById("canvas");
canvas.toBlob(function(blob){
console.log(blob);
});
讀取Blod
從Blob中讀取二進制內(nèi)容的唯一方法是使用 FileReader缩搅。
FileReader 對象允許異步讀取存儲在用戶計算機上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容越败，使用 File 或 Blob 對象指定要讀取的文件或數(shù)據(jù)。
var reader = new FileReader();
reader.addEventListener("loadend", function(e) {
// reader.result(或e.target.result) 包含轉(zhuǎn)化為類型數(shù)組的blob
});
reader.readAsArrayBuffer(blob);
為Blob創(chuàng)建Url用于下載文件 / 顯示圖片
window.URL對象將Blob對象視為一個本地文件,并可以為其生成一個Url
- 結(jié)合a標(biāo)簽的download屬性硼瓣，可以實現(xiàn)點擊url下載文件
createDownload("download.txt","download file");
function createDownload(fileName, content){
var blob = new Blob([content]);
var link = document.createElement("a");
link.innerHTML = fileName;
link.download = fileName;
link.href = URL.createObjectURL(blob);
document.getElementsByTagName("body")[0].appendChild(link);
}
- 結(jié)合img標(biāo)簽的src屬性,可以實現(xiàn)圖片預(yù)覽
const imageSelector = document.getElementById('imageSelector');
const imagePreview = document.getElementById('imagePreview');
imageSelector.addEventListener('change', (event) => {
const file = event.target.files[0];
const url = URL.createObjectURL(file);
imagePreview.src = url;
});
使用Blob生成xls
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<style>
/* 此樣式僅用于瀏覽器頁面效果究飞，Excel不會分離表格邊框，不需要此樣式 */
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<!-- 設(shè)置border="1"以顯示表格框線 -->
<table border="1">
<!-- caption元素可以生成表標(biāo)題堂鲤，其單元格列跨度為表格的列數(shù) -->
<caption>學(xué)生成績表</caption>
<tr>
<!-- 可以使用rowspan和colspan來合并單元格 -->
<th rowspan="2">學(xué)號</th>
<th rowspan="2">姓名</th>
<th rowspan="2">性別</th>
<th rowspan="2">年齡</th>
<th colspan="2">成績</th>
</tr>
<tr>
<th>語文</th>
<th>數(shù)學(xué)</th>
</tr>
<tr>
<td>1</td>
<td>張三</td>
<td>男</td>
<td>13</td>
<td>85</td>
<td>94</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>女</td>
<td>12</td>
<td>96</td>
<td>84</td>
</tr>
</table>
<a>導(dǎo)出表格</a>
<script>
// 使用outerHTML屬性獲取整個table元素的HTML代碼（包括<table>標(biāo)簽）亿傅，然后包裝成一個完整的HTML文檔，設(shè)置charset為urf-8以防止中文亂碼
var html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementsByTagName("table")[0].outerHTML + "</body></html>";
// 實例化一個Blob對象瘟栖，其構(gòu)造函數(shù)的第一個參數(shù)是包含文件內(nèi)容的數(shù)組葵擎，第二個參數(shù)是包含文件類型屬性的對象
var blob = new Blob([html], { type: "application/vnd.ms-excel" });
var a = document.getElementsByTagName("a")[0];
// 利用URL.createObjectURL()方法為a元素生成blob URL
a.href = URL.createObjectURL(blob);
// 設(shè)置文件名
a.download = "學(xué)生成績表.xls";
</script>
</body>
</html>
查看chrome://blob-internals/，可以查看最近的Blob：
此外canvas也可以通過toDataURL的方式建立下載
imgData = canvas.toDataURL('png');
imgData = imgData.replace('image/png','image/octet-stream');
link.href = URL.createObjectURL(blob);
