JSON对象与Blob对象互相转换

发表于 分类于

前言

在某些后台业务场景下，可能需要导出或导入一些数据；而这个数据的介质就是json文件。从服务端获取到的json数据可以转为json文件并下载，而从用户导入的json文件又可以转换为json数据（对象）提交给服务端。

转换步骤

核心

无论是json数据转.json文件，还是.json文件转json数据，都离不开Blob对象的支持。

.json文件转为json数据（对象）

  1. 根据上传组件获取到对应的File对象；
  2. 将File对象转为Blob对象；
  3. 利用FileReader的readAsText方法读取json数据；
  4. FileReader的onload方法会在解析成功时执行；此时该实例的result属性就是解析好的json字符串，进一步用JSON.parse()方法就能解析出json对象。

可以将上述步骤封装成一个函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/**
 * 将file对象（.json文件）转为json对象
 * @param {File} file file对象
 */
function fileToJson (file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = res => {
      const { result } = res.target // 得到字符串
      const data = JSON.parse(result) // 解析成json对象
      resolve(data)
    } // 成功回调
    reader.onerror = err => {
      reject(err)
    } // 失败回调
    reader.readAsText(new Blob([file]), 'utf-8') // 按照utf-8编码解析
  })
}

json数据（对象）转为Blob对象

由于Blob构造函数本身就支持将字符串转为文件，因此转换比较简单：

  1. 首先利用JSON.stringify()方法将json对象转为json字符串；
  2. 利用Blob构造函数得到Blob对象（注意：需要设置文件的MIME类型）；

如：

1
2
3
const blob = new Blob([JSON.stringify(data)], {
    type: 'application/json'
})

扩展：将Blob对象直接下载到本地

上面将json数据转换为Blob对象后，作用并不大；一个后续的使用场景可能为：将这个文件通过浏览器下载到本地。这个就需要用到createObjectURL()方法和<a>标签的download特性了。

  • URL.createObjectURL(blob/file)：该方法可以得到一个指向Blob对象或File对象对应的二进制文件流的url地址，访问即可下载该文件；
  • download属性：当<a>标签设置了该属性时，点击标签时浏览器不会跳转链接，而是将对应链接作为文件进行下载保存，而文件的名字就是download的属性值。

可以将上述流程封装成一个将json对象转化成文件并自动下载的函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
 * 利用a标签的download属性和blob转url，将json字符串转为json文件进行下载
 * @param {*} data json对象
 */
function downloadJson (data) {
  const download = document.createElement('a') // 匿名a标签
  const blob = new Blob([JSON.stringify(data)], {
    type: 'application/json'
  })
  const url = URL.createObjectURL(blob) // blob转url
  download.href = url
  download.download = 'filename.json' // 文件名
  download.click() // 触发下载
}

相关文档