今日碰到需求晰赞，前端對(duì)從后端獲取數(shù)據(jù)進(jìn)行純前端篩選過濾操作后陈醒，希望保存下文件，由于內(nèi)容格式相對(duì)簡(jiǎn)單或杠，經(jīng)調(diào)研采用 Blob URL方式實(shí)現(xiàn)。
瀏覽器兼容性
實(shí)現(xiàn)下載的函數(shù)
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);
}
描述下代碼內(nèi)容：
- 創(chuàng)建
a標(biāo)簽 - 使用
Blob構(gòu)造函數(shù)將文件內(nèi)容編譯為指定格式的二進(jìn)制 - 設(shè)置
download屬性設(shè)置文件名稱 -
Blob對(duì)象作為 Url 也賦給 a 標(biāo)簽宣蔚， - 觸發(fā)標(biāo)簽click
- 回收內(nèi)存
關(guān)于Blob
Blob 對(duì)象是一個(gè)字節(jié)序列向抢。擁有 size 和 type 等屬性。初始化 Blob 接受的內(nèi)容類型胚委。
- ArrayBuffer [TypedArrays] elements.
- ArrayBufferView [TypedArrays] elements.
- Blob elements.
- DOMString [WebIDL] elements.
URL.createObjectURL & URL.revokeObjectURL()
URL.createObjectURL() 靜態(tài)方法會(huì)創(chuàng)建一個(gè) DOMString挟鸠，它的 URL 表示參數(shù)中的對(duì)象。這個(gè) URL 的生命周期和創(chuàng)建它的窗口中的 document 綁定亩冬。這個(gè)新的URL 對(duì)象表示著指定的 File 對(duì)象或者 Blob 對(duì)象艘希。
DOMString:
一個(gè)UTF-16字符串，JavaScript 正是使用了這種編碼的字符串硅急，所以 DOMString 直接被映射為（is mapped directly to）
在每次調(diào)用 createObjectURL() 方法時(shí)覆享，都會(huì)創(chuàng)建一個(gè)新的 URL 對(duì)象，即使你已經(jīng)用相同的對(duì)象作為參數(shù)創(chuàng)建過营袜。當(dāng)不再需要這些 URL 對(duì)象時(shí)撒顿，每個(gè)對(duì)象必須通過調(diào)用 URL.revokeObjectURL() 方法來釋放。瀏覽器會(huì)在文檔退出的時(shí)候自動(dòng)釋放它們荚板，但是為了獲得最佳性能和內(nèi)存使用狀況凤壁，你應(yīng)該在安全的時(shí)機(jī)主動(dòng)釋放掉它們。
關(guān)于事件
createEvent 的事件必須要使用 initEvent跪另，但是這種方式已經(jīng)不被推薦拧抖。
參考文章
