在做后台系统需求的时候，有个需求是需要把当前表单配置导出，在另一个配置项下，导入这些配置，相当于做了一下配置拷贝。
通常我们导出下载一个文件，是先向后端发起请求，由后端处理数据后，再返回文件。
调研发现，纯前端也可以实现这样的效果，而且很简单，不需要后端做处理。前端在一次拿到数据后，就可以导出数据到文件。
来个简单的 DEMO
下面来分析实现他们，同时发布了一个更易用的npm包，有需要可以直接使用： iojson 🥰
导出json文件
创建一个a标签，通过a标签的download href属性，可以实现直接下载静态数据，amazing!
let link = document.createElement('a')
link.download = 'config.json'
link.href = 'data:text/plain,' + JSON.stringify(data)
link.click()
不需要过多解释，参考传送门：使用 download 属性将 canvas 保存为 PNG 格式 - MDN
导入json文件
// 创建一个file input
let input = document.createElement('input')
input.type = 'file'
// 绑定onchange事件
input.onchange = (event) => {
let files = event.target.files
if (!files || !files.length) {
input = null
throw new Error('No files')
}
// 当选择文件后，使用FileReader API读取文件，返回数据
let reader = new FileReader()
reader.onload = (event) => {
try {
let config = JSON.parse(event.target.result)
return config
} catch (e) {
throw new Error(e)
}
input = null
}
reader.readAsText(files[0])
}
// 触发上传文件
input.click()
