Html 将 json 字符串保存到客户端电脑(使用 HTML5 API)

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16329293/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:04:42  来源:igfitidea点击:

Save json string to client pc (using HTML5 API)

javascripthtml

提问by bsr

I read few older thread about the same, but seen the file API changed a lot recently. My requirement is to save a json file (data is locally in indexdDB, but I need a way to back it up). Since I use indexdDB, I only target recent browsers, mainly chrome. So, it it possible to save data (json string) to client computer?

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

I have seen http://eligrey.com/demos/FileSaver.js/, but is there a way to do it natively?

我看过http://eligrey.com/demos/FileSaver.js/,但有没有办法在本地做到这一点?

Thanks.

谢谢。

回答by potatosalad

You can use a Bloband the HTML5 a[download]feature to provide a JSON backup download:

您可以使用Blob和 HTML5a[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";

Here is a jsfiddle example: http://jsfiddle.net/potatosalad/yuM2N/

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

回答by markasoftware

Yes, you can. This assumes that you have the json in text:

是的你可以。这假设您在text以下位置拥有 json :

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

that is untested, but it should work.

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

回答by Samuel Bushi

You can use FileSaver.js.

您可以使用FileSaver.js

Sample code:

示例代码:

//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");

Use JSON.stringifyto create a string from JSON.

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

Fiddle: https://jsfiddle.net/9w9ofec4/3/

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

回答by Stefan Krüger

based on potatosalad answeri experimented with an 'self' updating link:
jsfiddle

基于土豆沙拉的答案,我尝试了一个“自我”更新链接:
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");

the function saveAsFile()needs the calling aelement as first argument.
than it updates the hreftarget to the new blob.

该函数saveAsFile()需要调用a元素作为第一个参数。
比它将href目标更新为新的 blob。