前端实现表单内容复制

1、背景

最近做项目的时候，每次开发环境和测试环通过表单填写一次配置数据，需要发布版本时，都需要再在生产环境提交一次表单，导致同一个事做了三次，最后想到的方法是直接吧表单填写的对象转为json写入文件中保存下来，下次需要填写时，直接将这个文件导入就行了，自动完成表单的填写。

2、实现

一、复制表单配置项，保存为文件

// 原始数据，只是举个简单例子
const jsonFile = {
  name: '123',
  age: 18
}

// 导出文件
const downloadJson = () => {
  const jsonString = JSON.stringify(jsonFile)

  const blob = new Blob([jsonString], {type: 'application/json;charset=utf-8'})
  const url = URL.createObjectURL(blob)

  let a = document.createElement('a')
  a.href = url
  a.download = 'data.json'
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  URL.revokeObjectURL(url)

}

导出文件内容

二、导入文件，自动完成表单项赋值

const handleUpload = (e: any) => {
  if (!e) return
  const file = e.target.files[0] as File
  const fileReader = new FileReader()
  fileReader.onload = (e: ProgressEvent<FileReader>) => {
    try {
      const jsonObj = JSON.parse(e!.target!.result as string)
      console.log('jsonObj', jsonObj)
      // 这里处理赋值关系，jsonObj就是原始数据
    } catch (error) {
      console.log('error', error)
    }
  }
  fileReader.onerror = (error: ProgressEvent<FileReader>) => {
    console.log('read file error:' + error)
  }

  fileReader.readAsText(file)
}

是否使用这个方法还要考虑表单配置项是否很多，如果只需要填写3-5个，久不需要这样做了。