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

本文转自：https://blog.csdn.net/wxl1555/article/details/86501049

前言

最近在做一个项目，有个需求就是，前端在内存中维护了一个很复杂的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);
}

可以看到文件已经下载到本地了， 也没有问题，是刚才我们维护在内存中的哪个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);
}

额，第二种方式可能在大文件的时候，不能导出所有数据。所以不推荐

方式三

FileReader
同样地，FileReader 对象也可以使得我们对 Blob 对象生成一个下载地址 URL，它和 URL.createObject 一样可以接收 File 或 Blob 对象。

这个过程，主要由两个函数完成 readAsDataURL 和 onload，前者用于将 Blob 或 File 对象转为对应的 URL，后者用于接收前者完成后的 URL，它会在 e.target.result 上。

完整的使用 Blob 和 FileReader 下载文件的 util 函数：

const readBlob2Url  =  (blob, type) =>{
  return new Promise(resolve => {
    const reader = new FileReader()
    reader.onload = function (e) {
      resolve(e.target.result)
    }
    reader.readAsDataURL(blob)
  })
}