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

歡迎訪問我的個人博客：http://www.xiaolongwu.cn

前言

最近在做一個項目，有個需求就是，前端在內存中維護了一個很復雜的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);
}

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

我們在打開文件看下內容

也沒有問題，是剛才我們維護在內存中的哪個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);
}

當然第二種方式和第一種方式的結果是完全一樣的，感覺第二種方式更為簡單。

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

我的CSDN博客地址：https://blog.csdn.net/wxl1555

如果您對我的博客內容有疑惑或質疑的地方，請在下方評論區留言，或郵件給我，共同學習進步。

郵箱：[e-mail]