js基础--将内存中的数据保存为文件下载到本地
栏目: JavaScript · 发布时间: 5年前
内容简介:欢迎访问我的个人博客:最近在做一个项目,有个需求就是,前端在内存中维护了一个很复杂的json对象,当点击下载按钮时,需要把这个json对象保存到文本中并下载到本地。假如在我们项目中有个json对象如下:
欢迎访问我的个人博客: 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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Ruby语言入门
Yugui / 丁明、吕嘉 / 东南大学出版社 / 2010 年4月 / 32.00元
《Ruby 语言入门(中文版)》为具有一定其他语言的编程经验的读者介绍Ruby的特征、Ruby中的编程方法和编程习惯。这些内容都是为了让读者能够边阅读Ruby的资料边进行实践性的学习所必须具备的基础知识。《Ruby 语言入门(中文版)》对Ruby的基础部分和元类、块语句这样独特的概念,以及由此产生的特有的文化进行了说明,以使读者能够了解到Ruby独特的思考方式。读完《Ruby 语言入门(中文版)》......一起来看看 《Ruby语言入门》 这本书的介绍吧!