保存json字符串到客户端pc(使用HTML5 API)

Save json string to client pc (using HTML5 API)

本文关键字：使用 HTML5 API pc json 字符串 客户端 保存      更新时间：2023-09-26

我读了一些关于相同的旧线程，但看到文件API最近改变了很多。我的要求是保存一个json文件(数据在indexdb本地，但我需要一种方法来备份它)。因为我使用indexdb，我只针对最近的浏览器，主要是chrome。所以，它有可能保存数据(json字符串)到客户端计算机?

我已经看到http://eligrey.com/demos/FileSaver.js/，但是有没有一种方法来做它的本机?

谢谢。

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

可以。这假设您在text中有json:

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

没有经过测试，但是应该可以运行。

你可以使用filesver .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/

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

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'}])

要用自定义名称保存文件，可以创建一个隐藏的元素，然后单击它。filesver .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);
}
相关文章：