将 json 字符串保存到客户端电脑（使用 HTML5 API）答案

【问题标题】：Save json string to client pc (using HTML5 API)将 json 字符串保存到客户端电脑（使用 HTML5 API）
【发布时间】：2013-05-02 02:12:43
【问题描述】：

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

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

谢谢。

【问题讨论】：

标签： javascript html

【解决方案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/

【讨论】：

+1 太棒了！！有没有办法通过“另存为”按钮保存它。这将是理想的，如果不是我会去上面。谢谢。
您可能想查看Downloadify 之类的内容。据我目前所知，没有简单的 javascript 跨浏览器方式来强制显示“另存为”对话框。请参阅stackoverflow.com/questions/2897619/… 了解更多信息。
@potatosalad：恕我直言，这是有充分理由的。我努力配置我的浏览器的下载行为。不会有 Javascript 篡改！顺便说一句，很酷的解决方案。谢谢。

【解决方案2】：

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

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

这是未经测试的，但它应该可以工作。

【讨论】：

这几乎可以工作，但不允许我将内容保存在这个输出的新窗口中......我只能选择输出的内容，复制并粘贴到其他地方，不知道我怎么做保存输出？

【解决方案3】：

您可以使用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/

【讨论】：

这个答案没有回答问题... 问题描述表明他已经看过 FileSaver 但想要一个本地解决方案。对不起兄弟
FileSaver 解决方案在可用时实际上使用了 HTML5 api，并且对于旧版浏览器它工作得很好，这比使用纯 HTML5 更好。所以，也许有人应该说，是的，当然有代码，但是为什么要麻烦，当代码在许多浏览器中失败时，最好使用好的库。

【解决方案4】：

基于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。

【讨论】：

【解决方案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'}])

【讨论】：

【解决方案6】：

要使用自定义名称保存文件，您可以创建一个隐藏的元素，然后单击它。 FileSaver.js 使用此方法。

function download(name, text){
    var toDownload=new Blob([text],
        {type:'data:application/octet-stream'});
    var link = window.URL.createObjectURL(toDownload);
    var el = document.createElement("a");
    el.href = link;
    el.download = name;
    el.click();
    window.URL.revokeObjectURL(link);
}

【讨论】：