前端保存JSON文件到本地

我們在Chrome開發者工具的Console標簽頁里，可以輸入JavaScript變量然后回車，查看這些變量的值。

 

 

如果我想將這個變量保存到本地，以備以后進一步分析，現在我向大家分享一種簡單的做法。

(function(console){
console.save = function(data, filename){
if(!data) {
console.error('Console.save: No data')
return;
}
if(!filename) filename = 'console.json'
if(typeof data === "object"){
data = JSON.stringify(data, undefined, 4)
}
var blob = new Blob([data], {type: 'text/json'}),
e = document.createEvent('MouseEvents'),
a = document.createElement('a')
a.download = filename
a.href = window.URL.createObjectURL(blob)
a.dataset.downloadurl = ['text/json', a.download, a.href].join(':')
e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
a.dispatchEvent(e)
}
})(console)
console.save(result, "result.json");

 

 

把這段代碼粘貼到console頁執行，給標准的console對象新增一個save方法。這個方法有兩個輸入參數，第一個為待保存成本地JSON文件的JavaScript變量，第二個參數為本地JSON文件的名稱。

還是回到上面的例子，我在Chrome開發者工具的console頁面執行了上述的JavaScript代碼后，緊接着再執行下面的語句：

console.save(result, "result.json");

回車，Chrome自動彈出一個JSON文件保存窗口：

保存到本地即可。這種方式省去了手動將JavaScript變量序列化成JSON string再手動保存成本地文件的工作量，提升了程序員的工作效率。