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オブジェクトです.
方式2

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

もちろん第2の方式と第1の方式の結果はまったく同じで、第2の方式がもっと簡単だと感じます.
githubリソースアドレス:jsベース--メモリ内のデータをファイルとして保存してローカルにダウンロード
私のCSDNブログアドレス:https://blog.csdn.net/wxl1555
私のブログの内容に疑問や疑問がある場合は、下のコメントエリアにメッセージを残したり、メールを送ったりして、一緒に勉強してください.
メールアドレス:[email protected]