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

nifhlheimr 发布于2019-08-23 14:44 / 2115人阅读

摘要：欢迎访问我的个人博客前言最近在做一个项目，有个需求就是，前端在内存中维护了一个很复杂的对象，当点击下载按钮时，需要把这个对象保存到文本中并下载到本地。

欢迎访问我的个人博客：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

云服务器 GPU云服务器 js将数据保存到文件路径 js将数据保存到txt文件 js保存数据到手机本地文件 js保存文件到本地

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101053.html

JavaScript学习总结（一）基础部分

摘要：前缀规范每个局部变量都需要有一个类型前缀，按照类型可以分为表示字符串。例如，表示以上未涉及到的其他对象，例如，表示全局变量，例如，是一种区分大小写的语言。布尔值与字符串相加将布尔值强制转换为字符串。基本概念 javascript是一门解释型的语言，浏览器充当解释器。js执行时，在同一个作用域内是先解释再执行。解释的时候会编译function和var这两个关键词定义的变量，编译完成后从...

AlanKeene 2019-08-21 12:27 评论0 收藏0
JavaScript基础知识

摘要：用和包裹的内容，称为字符串。关系运算符用于进行比较的运算符。强制依赖于，非强制依赖于。使用场合全局环境构造函数对象的方法闭包闭包是指有权访问另一个函数作用域中的变量的函数。所有全局对象函数以及变量均自动成为对象的成员。 1 什么是JavaScript JavaScript一种直译式脚本语言，一种基于对象和事件驱动并具有安全性的客户端脚本语言；也是一种广泛应用客户端web开发的脚本语言。...

Code4App 2019-08-23 18:04 评论0 收藏0
常见js笔试面试题（持续更新）

摘要：相当于绕过了浏览器端，自然就不存在跨域问题。三者的区别与服务器的交互数据始终在同源的请求中携带即使不需要，即在浏览器和服务器间来回传递。而和不会自动把数据发给服务器，仅在本地保存。和虽然也有存储大小的限制，但比大得多，可以达到或更大。本文提供最简便的解答方式，方便快速记忆，复盘，详细答案可自己再搜一下。 js基础知识 1. javascript typeof返会的数据类型有哪些 ob...

yuxue 2019-08-21 17:28 评论0 收藏0
Android面试整理(附答案)

摘要：和体现了对不同异常情况的分类。是程序正常运行中，可以预料的意外情况，可能并且应该被捕获，进行相应的处理。是指在正常情况下，不大可能出现的情况，绝大部分都会使程序处于非正常不可恢复的状态。常见的非对称加密包括等。面试，无非都是问上面这些问题（挺多的 - -!），聘请中高级的安卓开发会往深的去问，并且会问一延伸二。以下我先提出几点重点，是面试官基本必问的问题，请一定要去了解！基础知识...

Vultr 2019-08-16 13:58 评论0 收藏0