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

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

.json文件转为json数据（对象）
根据上传组件获取到对应的File对象；
将File对象转为Blob对象；
利用FileReader的readAsText方法读取json数据；
FileReader的onload方法会在解析成功时执行；此时该实例的result属性就是解析好的json字符串，进一步用JSON.parse()方法就能解析出json对象。
可以将上述步骤封装成一个函数：

/**
• 将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构造函数本身就支持将字符串转为文件，因此转换比较简单：

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

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对象转化成文件并自动下载的函数：

* 利用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() // 触发下载
}