前言 在某些后台业务场景下，可能需要导出或导入一些数据；而这个数据的介质就是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() // 触发下载 }