## BLOB (binary large object)，二進制大對象，是一個可以存儲二進制文件的容器 > 創建Blob對象的方法有幾種，可以調用Blob構造函數，還可以使用一個已有Blob對象上的slice()方法切出另一個Blob對象，還可以調用canvas對象上的toBlob方法。 Blob對象有兩個只讀屬性： * size：二進制數據的大小，單位為字節。 * type：二進制數據的MIME類型，全部為小寫，如果類型未知，則該值為空字符串。 在Ajax操作中，如果xhr.responseType設為blob，接收的就是二進制數據。 ### Blob 構造函數生成blob對象 Blob構造函數，接受兩個參數。 第一個參數是一個包含實際數據的數組，第二個參數是數據的類型，這兩個參數都不是必需的 數組元素可以是任意多個的ArrayBuffer，ArrayBufferView (typed array)， Blob，或者 DOMString對象。 例如： ``` var arr = ['<h1>hello world</h1>']; var blob = new Blob(arr, { "type" : "text/xml" }); // the blob console.log(blob); ``` #### 用JS在瀏覽器中創建下載文件 HTML5中給a標簽增加了一個download屬性，只要有這個屬性，點擊這個鏈接時瀏覽器就不在打開鏈接指向的文件，而是改為下載（目前只有chrome、firefox和opera支持）。 下載時會直接使用鏈接的名字來作為文件名，但是是可以改的，只要給download加上想要的文件名即可，如：`download="not-a-file.js"`。 ### **以上的方法只適合用在文件是在服務器上的情況** 如果在瀏覽器端js生成的內容，想讓瀏覽器進行下載要如何辦到呢？DataURI可以實現這個效果，但是DataURI的文件類型被限制了，我們這里可以變通一下實現blob對象。 ``` <a id="aLink">下載</a> <script type="text/javascript"> function downloadFile (el, fileName, content) { var aLink = document.querySelector(el); var blob = new Blob([content]); aLink.download = fileName; aLink.href = URL.createObjectURL(blob); } document.querySelector('#aLink').addEventListener('click',function () { downloadFile('#aLink', 'hello.txt', '<h1>hello world</h1>'); }) </script> ``` > 其他概念 等用到再記