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

栏目: JavaScript · 发布时间: 6年前

内容简介:欢迎访问我的个人博客:最近在做一个项目,有个需求就是,前端在内存中维护了一个很复杂的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);
}

可以看到文件已经下载到本地了

js基础--将内存中的数据保存为文件下载到本地 .jpg)

我们在打开文件看下内容

js基础--将内存中的数据保存为文件下载到本地 .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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

深度学习

深度学习

[美] 伊恩·古德费洛、[加] 约书亚·本吉奥、[加] 亚伦·库维尔 / 赵申剑、黎彧君、符天凡、李凯 / 人民邮电出版社 / 2017-7-1 / 168

《深度学习》由全球知名的三位专家Ian Goodfellow、Yoshua Bengio 和Aaron Courville撰写,是深度学习领域奠基性的经典教材。全书的内容包括3个部分:第1部分介绍基本的数学工具和机器学习的概念,它们是深度学习的预备知识;第2部分系统深入地讲解现今已成熟的深度学习方法和技术;第3部分讨论某些具有前瞻性的方向和想法,它们被公认为是深度学习未来的研究重点。 《深度......一起来看看 《深度学习》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

随机密码生成器
随机密码生成器

多种字符组合密码

MD5 加密
MD5 加密

MD5 加密工具