Question

我读了几个关于相同的旧线程，但看到文件API最近发生了很大的变化。我的要求是保存一个json文件（数据在indexdDB本地，但我需要一种备份方式）。由于我使用indexdDB，我只针对最近的浏览器，主要是chrome。那么，是否可以将数据（json字符串）保存到客户端计算机？

我见过http://eligrey.com/demos/FileSaver.js/，但有没有办法原生地做到这一点？

感谢。

Answer 1

您可以使用Blob和HTML5 a[download]功能提供JSON备份下载：

var data = {a:1, b:2, c:3};
var json = JSON.stringify(data);
var blob = new Blob([json], {type: "application/json"});
var url  = URL.createObjectURL(blob);

var a = document.createElement('a');
a.download    = "backup.json";
a.href        = url;
a.textContent = "Download backup.json";

这是一个jsfiddle示例：http://jsfiddle.net/potatosalad/yuM2N/

Answer 2

是的，你可以。这假设你有text中的json：

var toDownload=new Blob([text],{type:'x-whatever/x-backup'});
var link=window.URL.createObjectURL(toDownload);
window.location=link;

未经测试，但它应该有效。

Answer 3

基于potatosalad answer我尝试了“自我”更新链接：
jsfiddle

function saveAsFile(link, content, filename) {
    var blob = new Blob([content], {type: "text/text"});
    var url  = URL.createObjectURL(blob);

    // update link to new 'url'
    link.download    = filename + ".txt";
    link.href        = url;
}

saveAsFile(this, "YourContent", "HelloWorldFile");

函数saveAsFile()需要调用a元素作为第一个参数而不是将href目标更新为新blob。

Answer 4

您可以使用FileSaver.js。

示例代码：

//include the js file in html.
<script src="FileSaver.min.js"></script>    

// other code ...

//use it here.
var myjson= "{a:3, b:4}";
var blob = new Blob([myjson], {type: "application/json"});

var saveAs = window.saveAs;
saveAs(blob, "my_outfile.json");

使用JSON.stringify从JSON创建字符串。

小提琴：https://jsfiddle.net/9w9ofec4/3/

Answer 5

function saveAsJSON(data, name=Date.now()+'.json') {
  const a = document.createElement('a')
  a.download = name
  a.href = URL.createObjectURL(new Blob([JSON.stringify(data)], {type: 'application/json'}))
  a.click()
}

// https://stackoverflow.com/questions/62371219/chrome-stops-download-files-from-stackoverflow-snippets
saveAsJSON(['orange', 'banana', {name: 'apple'}])

将json字符串保存到客户端pc（使用HTML5 API）

5 个答案: