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);
}

能夠看到文件已經下載到本地了

.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);
}

固然第二種方式和第一種方式的結果是徹底同樣的，感受第二種方式更爲簡單。

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

個人CSDN博客地址：https://blog.csdn.net/wxl1555

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

郵箱：wuxiaolong802@163.com