Blob作成、dispatchEvent イベントの伝播でダウンロード

jQuery

実現させていく例として２年程前に書いた
oboe2uran.hatenablog.com

oboe2uran.hatenablog.com

↑で書いた、jsTree 編集データＪＳＯＮのダウンロードする方法です。
今回は、Python eel を使いません。

初期表示の JSON もＵＲＬ指定読込みでなく、ＪＳソースとして用意します。
jsTree のJSON を任意の window変数、window.TREE として宣言する
だけの JS を用意する。
treedata.js 

window.TREE= [
  {
    "id": "1",
    "icon": "jstree-notIcon",
    "text": "ルート",
    "children": [
      {
        "id": "11",
   :
  (省略）

HTMLヘッダの読む込みも、、

<script src="js/develop-tree.js" type="text/javascript"></script>
<script src="js/develop.js" type="text/javascript"></script>

ここから、以下のようになる。

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>develop.html</title>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.5.0/css/all.min.css" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="jstree/themes/default/style.min.css" rel="stylesheet" type="text/css"/>
<link href="css/develop.css" rel="stylesheet" type="text/css"/>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" type="text/javascript"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jstree@3.3.11/dist/jstree.min.js" type="text/javascript"></script>
<script src="treedata.js" type="text/javascript"></script>
<script src="js/develop-tree.js" type="text/javascript"></script>
<script src="js/develop.js" type="text/javascript"></script>
</head>

develop-tree.js の core の data に、この window.TREE をセットする。

/**
 * develop-tree.js
 */
$(function(){
   $.jstree.defaults.core.themes.variant = "large";
   $.jstree.defaults.core.themes.responsive = true;

   $('#tree').jstree({
      'plugins': [ 'contextmenu','dnd' ],
      'core':{
         'data': window.TREE,
         'check_callback' : true,
      },
   :
  (省略）

Python eel で作成した時は、以下のようにしていた。

      'core':{
         'data':{
             "url":"./tree.json",
             "dataType":"json"
         },

以前は、SAVE ボタンを押した時に、これら Python , HTML を置いた場所（ＰＣ）に
TreeデータJSON を保存したが、
Python eel でない環境では、ダウンロードさせるしかありません。

そこで、ダウンロードさせるには、ボタンクリック時の処理として
マウスイベントを生成して dispatchEvent イベントの伝播でダウンロードさせます。

$(function(){
   $('#create').click(function(){
      var v = $('#tree').jstree(true).get_json('#', {flat:true});
      var data = JSON.stringify(v, null, 2);
      var blob = new Blob([data], {type: 'text/json'}),
      e = document.createEvent('MouseEvents'),
      a = document.createElement('a');
      a.download = "test.json";
      a.href = window.URL.createObjectURL(blob);
      a.dataset.downloadurl =  ['text/json', a.download, a.href].join(':');
      e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
      a.dispatchEvent(e);
    });
});