js基礎--將內存中的數據保存為文件下載到本地

前言

最近在做一個項目，有個需求就是，前端在內存中維護了一個很復雜的json對象，當點擊下載按鈕時，需要把這個json對象保存到文本中並下載到本地。

總結了兩種實現方式

假如在我們項目中有個json對象如下：

    var jsonObj = { name: 'Leon WuV', age: 23 }

方式一

當我們點擊下載按鈕時，調用如下方法

function downFlie() { // 創建a標簽 var elementA = document.createElement('a'); //文件的名稱為時間戳加文件名后綴 elementA.download = +new Date() + ".tpl"; elementA.style.display = 'none'; //生成一個blob二進制數據，內容為json數據 var blob = new Blob([JSON.stringify(jsonObj)]); //生成一個指向blob的URL地址，並賦值給a標簽的href屬性 elementA.href = URL.createObjectURL(blob); document.body.appendChild(elementA); elementA.click(); document.body.removeChild(elementA); }

可以看到文件已經下載到本地了

.jpg)

我們在打開文件看下內容

.jpg)

也沒有問題，是剛才我們維護在內存中的哪個json對象

方式二

 

function downFile() { var elementA = document.createElement('a'); elementA.setAttribute('href', 'data:text/plain;charset=utf-8,' + JSON.stringify(json1)); elementA.setAttribute('download', +new Date() + ".tpl"); elementA.style.display = 'none'; document.body.appendChild(elementA); elementA.click(); document.body.removeChild(elementA); }