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

nifhlheimr 發布于2019-08-23 14:44 / 2161人閱讀

摘要：歡迎訪問我的個人博客前言最近在做一個項目，有個需求就是，前端在內存中維護了一個很復雜的對象，當點擊下載按鈕時，需要把這個對象保存到文本中并下載到本地。

歡迎訪問我的個人博客：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

云服務器 GPU云服務器 js將數據保存到文件路徑 js將數據保存到txt文件 js保存數據到手機本地文件 js保存文件到本地

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/101053.html

JavaScript學習總結（一）基礎部分

摘要：前綴規范每個局部變量都需要有一個類型前綴，按照類型可以分為表示字符串。例如，表示以上未涉及到的其他對象，例如，表示全局變量，例如，是一種區分大小寫的語言。布爾值與字符串相加將布爾值強制轉換為字符串。基本概念 javascript是一門解釋型的語言，瀏覽器充當解釋器。js執行時，在同一個作用域內是先解釋再執行。解釋的時候會編譯function和var這兩個關鍵詞定義的變量，編譯完成后從...

AlanKeene 2019-08-21 12:27 評論0 收藏0
JavaScript基礎知識

摘要：用和包裹的內容，稱為字符串。關系運算符用于進行比較的運算符。強制依賴于，非強制依賴于。使用場合全局環境構造函數對象的方法閉包閉包是指有權訪問另一個函數作用域中的變量的函數。所有全局對象函數以及變量均自動成為對象的成員。 1 什么是JavaScript JavaScript一種直譯式腳本語言，一種基于對象和事件驅動并具有安全性的客戶端腳本語言；也是一種廣泛應用客戶端web開發的腳本語言。...

Code4App 2019-08-23 18:04 評論0 收藏0
常見js筆試面試題（持續更新）

摘要：相當于繞過了瀏覽器端，自然就不存在跨域問題。三者的區別與服務器的交互數據始終在同源的請求中攜帶即使不需要，即在瀏覽器和服務器間來回傳遞。而和不會自動把數據發給服務器，僅在本地保存。和雖然也有存儲大小的限制，但比大得多，可以達到或更大。本文提供最簡便的解答方式，方便快速記憶，復盤，詳細答案可自己再搜一下。 js基礎知識 1. javascript typeof返會的數據類型有哪些 ob...

yuxue 2019-08-21 17:28 評論0 收藏0
Android面試整理(附答案)

摘要：和體現了對不同異常情況的分類。是程序正常運行中，可以預料的意外情況，可能并且應該被捕獲，進行相應的處理。是指在正常情況下，不大可能出現的情況，絕大部分都會使程序處于非正常不可恢復的狀態。常見的非對稱加密包括等。面試，無非都是問上面這些問題（挺多的 - -!），聘請中高級的安卓開發會往深的去問，并且會問一延伸二。以下我先提出幾點重點，是面試官基本必問的問題，請一定要去了解！基礎知識...

Vultr 2019-08-16 13:58 評論0 收藏0