javascript - 将 JSON 数据保存到本地文件

Question

在我的程序中，我使用 JSON.stringify() 获取 JSON 格式数据。现在我想将此 JSON 对象保存在文件中。

我的问题是:当单击 jquery 上的按钮时，如何将 JSON 数据保存到本地创建的文件中？

我的 JSON 对象是这样的:

{"tasks":[{"blockId":"startpoint4","tasktype":"startpoint","properties":[],"positionX":430,"positionY":230},{"blockId":"userTask5","tasktype":"userTask","properties":[],"positionX":630,"positionY":230}],"connections":[],"properties":[],"numberOfElements":5}

Answer 1

您可以使用Blob构造函数和URL.createObjectURL()创建一个临时 anchor 标记，并将 download 属性设置为可下载文件应具有的名称，然后在该 anchor 元素上触发 click 事件。不幸的是，这不适用于任何浏览器，但支持 Blob constructor其实还不错。

这是一个例子。

var data = '{"tasks":[{"blockId":"startpoint4","tasktype":"startpoint","properties":[],"positionX":430,"positionY":230},{"blockId":"userTask5","tasktype":"userTask","properties":[],"positionX":630,"positionY":230}],"connections":[],"properties":[],"numberOfElements":5}';


document
.querySelector('#download')
.addEventListener('click', function() {

  var blob = new Blob( [ data ], {
      type: 'application/octet-stream'
  });

  var url = URL.createObjectURL( blob );
  var link = document.createElement( 'a' );
  link.setAttribute( 'href', url );
  link.setAttribute( 'download', 'data.json' );

  link.click()

  URL.revokeObjectURL(url)

})

<button id="download">Download</button>