前一段時間碰到一需求，前端對從後端獲取資料進行純前端篩選過濾操作後，希望儲存下檔案，由於內容格式相對簡單，經調研採用 Blob URL方式實現。
瀏覽器相容性
實現下載的函式
|
1 2 3 4 5 6 7 8 9 10 11 |
function loadFile(fileName, content){ var aLink = document.createElement('a'); var blob = new Blob([content], { type: 'text/plain' }); var evt = new Event('click'); aLink.download = fileName; aLink.href = URL.createObjectURL(blob); aLink.click(); URL.revokeObjectURL(blob); } |
描述下程式碼內容：
- 建立
a標籤 - 使用
Blob建構函式將檔案內容編譯為指定格式的二進位制 - 設定
download屬性設定檔名稱 Blob物件作為 Url 也賦給 a 標籤，- 觸發標籤click
- 回收記憶體
關於Blob
Blob 物件是一個位元組序列。擁有 size 和 type 等屬性。初始化 Blob 接受的內容型別。
- ArrayBuffer [TypedArrays] elements.
- ArrayBufferView [TypedArrays] elements.
- Blob elements.
- DOMString [WebIDL] elements.
URL.createObjectURL & URL.revokeObjectURL()
URL.createObjectURL() 靜態方法會建立一個 DOMString，它的 URL 表示引數中的物件。這個 URL 的生命週期和建立它的視窗中的 document 繫結。這個新的URL 物件表示著指定的 File 物件或者 Blob 物件。
DOMString:
一個UTF-16字串，JavaScript 正是使用了這種編碼的字串，所以 DOMString 直接被對映為（is mapped directly to）
在每次呼叫 createObjectURL() 方法時，都會建立一個新的 URL 物件，即使你已經用相同的物件作為引數建立過。當不再需要這些 URL 物件時，每個物件必須通過呼叫 URL.revokeObjectURL() 方法來釋放。瀏覽器會在文件退出的時候自動釋放它們，但是為了獲得最佳效能和記憶體使用狀況，你應該在安全的時機主動釋放掉它們。
關於事件
createEvent 的事件必須要使用 initEvent，但是這種方式已經不被推薦。