js基础–将内存中的数据保存为文件下载到本地

共计 1126 个字符，预计需要花费 3 分钟才能阅读完成。

欢迎访问我的个人博客：http://www.xiaolongwu.cn
前言
最近在做一个项目，有个需求就是，前端在内存中维护了一个很复杂的 json 对象，当点击下载按钮时，需要把这个 json 对象保存到文本中并下载到本地。
总结了两种实现方式
假如在我们项目中有个 json 对象如下：
var jsonObj = {
name: ‘Leon WuV’,
age: 23
}
方式一
当我们点击下载按钮时，调用如下方法
function downFlie() {
// 创建 a 标签
var elementA = document.createElement(‘a’);

// 文件的名称为时间戳加文件名后缀
elementA.download = +new Date() + “.tpl”;
elementA.style.display = ‘none’;

// 生成一个 blob 二进制数据，内容为 json 数据
var blob = new Blob([JSON.stringify(jsonObj)]);

// 生成一个指向 blob 的 URL 地址，并赋值给 a 标签的 href 属性
elementA.href = URL.createObjectURL(blob);
document.body.appendChild(elementA);
elementA.click();
document.body.removeChild(elementA);
}
可以看到文件已经下载到本地了
.jpg)
我们在打开文件看下内容
.jpg)
也没有问题，是刚才我们维护在内存中的哪个 json 对象
方式二
function downFile() {
var elementA = document.createElement(‘a’);

elementA.setAttribute(‘href’, ‘data:text/plain;charset=utf-8,’ + JSON.stringify(json1));
elementA.setAttribute(‘download’, +new Date() + “.tpl”);
elementA.style.display = ‘none’;
document.body.appendChild(elementA);
elementA.click();
document.body.removeChild(elementA);
}

当然第二种方式和第一种方式的结果是完全一样的，感觉第二种方式更为简单。
github 资源地址：js 基础 – 将内存中的数据保存为文件下载到本地
我的 CSDN 博客地址：https://blog.csdn.net/wxl1555
如果您对我的博客内容有疑惑或质疑的地方，请在下方评论区留言，或邮件给我，共同学习进步。
邮箱：wuxiaolong802@163.com