将 json 对象写入 javascript 中的文本文件

IT技术 javascript json
2021-02-28 01:07:00

我在 javascript 中有一个 JSON 对象。我想简单地将 JSON 对象写入文本文件。从我到目前为止遇到的事情来看，由于客户端的安全问题，这是不可能的。有解决方法吗？如果最初放置一些虚拟值，是否可以修改已经存在的文件？

谢谢

2个回答

您可以做的一件事是将 JSON 设置为动态下载。

var data = "{name: 'Bob', occupation: 'Plumber'}";
var url = 'data:text/json;charset=utf8,' + encodeURIComponent(data);
window.open(url, '_blank');
window.focus();

工作演示：http : //jsfiddle.net/sLq3F/

除此之外，出于安全原因，您无法将 JSON 写入客户端的文件。（否则，您可以访问网站用户的文件系统。）为此，您必须使用服务器端语言，并将文件存储在服务器端。

更正：看起来您可以写入文件，即用户文件系统的“沙盒部分”。请参阅下面的 Kevin Jantzer 的评论。

另一个更正：抱歉，未使用文件系统 API。来自 HTMl5Rocks 网站：“2014 年 4 月，公共网络应用程序宣布文件系统 API 规范应被视为已死。其他浏览器对实现它几乎没有兴趣。”

来自@KevinJantzer 的链接：“2014 年 4 月，公共网络应用程序宣布文件系统 API 规范应该被视为已死。其他浏览器对实现它几乎没有兴趣。”
2021-04-21 01:07:00
此方法因“复杂”json 而失败，例如{a:{1,2,3}, b:"33", c:{1,"a"}}但如果encodeURIComponent被替换为JSON.stringify，则结果没问题。
2021-05-07 01:07:00
@MiguelVazq 在@ktm5124 的示例中要注意的是它data是一个字符串，而不是一个原始对象。你可以只使用JSON.stringify()，但这会给你一个包含原始 JSON 字符串的 URL，如果对象包含一个 URL（或者实际上是任何带有斜杠的字符串），这可能会导致问题。如果您从原始对象开始，最可靠的方法是使用stringify()它并使用encodeURIComponent()，例如：var url = 'data:text/json;charset=utf8,' + encodeURIComponent(JSON.stringify(data));
2021-05-15 01:07:00
虽然，您可以使用 HTML5 的新FileSystem API写入文件
2021-05-19 01:07:00
抱歉，文件系统 API 不可靠。来自 HTMl5Rocks 网站：“2014 年 4 月，公共网络应用程序宣布文件系统 API 规范应被视为已死。其他浏览器对实现它几乎没有兴趣。”
2021-05-21 01:07:00

也许这个解决方案更优雅一点，在 Chrome、FF 和 ie7 到 ie10 中测试，使用文本、JSON、PDF 和 XLS 数据进行测试（使用适当的内容类型）

要么为saveFile()函数提供一个数据 blob，要么动态创建一个数据 blob，type设置为空，并且你的数据在[]'s之间

在此示例中，我们将仅对settings对象进行字符串化，并正确设置数据类型。

settings = { any_kind_of_object: true };
json_str = JSON.stringify(settings);

saveFile('yourfilename.json', "data:application/json", new Blob([json_str],{type:""}));

function saveFile (name, type, data) {
    if (data != null && navigator.msSaveBlob)
        return navigator.msSaveBlob(new Blob([data], { type: type }), name);

    var a = $("<a style='display: none;'/>");
    var url = window.URL.createObjectURL(new Blob([data], {type: type}));
    a.attr("href", url);
    a.attr("download", name);
    $("body").append(a);
    a[0].click();
    setTimeout(function(){  // fixes firefox html removal bug
        window.URL.revokeObjectURL(url);
        a.remove();
    }, 500);  
}
其它你可能感兴趣的问题
上一篇如何将 Bootstrap-datepicker 元素与 angularjs ng-model 绑定？ 下一篇Angular 根据对象的属性过滤对象