一個Blob對象就是一個包含有只讀原始數據的類文件對象，被瀏覽器“視同文件”。File 接口基于Blob，繼承了Blob的功能,并且擴展支持了用戶計算機上的本地文件。
Blob對象僅僅是一個可以設置MIME類型的，二進制數據的容器，真正的業務功能還需要通過FileReader、URL、Canvas等對象實現
獲取Blob
通過<input type="file">即可獲取本地文件的Blob對象
imageSelector.addEventListener('change', (event) => {
const file = event.target.files[0];
console.log(file instanceof Blob);//true
});
創建Blob
1.通過構造函數
var blob = new Blob(dataArray:Array<any>, opt:{type:string});
- dataArray：數組，包含了要添加到Blob對象中的數據，數據可以是任意多個ArrayBuffer，ArrayBufferView， Blob，或者 DOMString對象。
- opt：對象，用于設置Blob對象的屬性（如：MIME類型）
2.通過Blob.slice()
Blob.slice(start:number, end:number, contentType:string)
- 此方法返回一個新的Blob對象，包含了原Blob對象中指定范圍內的數據
3.通過canvas.toBlob()
var canvas = document.getElementById("canvas");
canvas.toBlob(function(blob){
console.log(blob);
});
讀取Blod
從Blob中讀取二進制內容的唯一方法是使用 FileReader。
FileReader 對象允許異步讀取存儲在用戶計算機上的文件（或原始數據緩沖區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。
var reader = new FileReader();
reader.addEventListener("loadend", function(e) {
// reader.result(或e.target.result) 包含轉化為類型數組的blob
});
reader.readAsArrayBuffer(blob);
為Blob創建Url用于下載文件 / 顯示圖片
window.URL對象將Blob對象視為一個本地文件,并可以為其生成一個Url
- 結合a標簽的download屬性，可以實現點擊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);
}
- 結合img標簽的src屬性,可以實現圖片預覽
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>
<!-- 設置border="1"以顯示表格框線 -->
<table border="1">
<!-- caption元素可以生成表標題，其單元格列跨度為表格的列數 -->
<caption>學生成績表</caption>
<tr>
<!-- 可以使用rowspan和colspan來合并單元格 -->
<th rowspan="2">學號</th>
<th rowspan="2">姓名</th>
<th rowspan="2">性別</th>
<th rowspan="2">年齡</th>
<th colspan="2">成績</th>
</tr>
<tr>
<th>語文</th>
<th>數學</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>導出表格</a>
<script>
// 使用outerHTML屬性獲取整個table元素的HTML代碼（包括<table>標簽），然后包裝成一個完整的HTML文檔，設置charset為urf-8以防止中文亂碼
var html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementsByTagName("table")[0].outerHTML + "</body></html>";
// 實例化一個Blob對象，其構造函數的第一個參數是包含文件內容的數組，第二個參數是包含文件類型屬性的對象
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);
// 設置文件名
a.download = "學生成績表.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);
