导入导出操作vue

导出的时候可以导出table某一行的详情数据，也可以导出整个表格，导入的时候相当于新增操作。

<el-button @click="handleExport">Export instances</el-button>
<el-button @click="handleImport">Import instances</el-button>

// 导出
const handleExport = () => {
  // 将数据转换为json格式,res为导出的数据
  const exportData = JSON.stringify(res, null, 2)
  // 创建Blob对象
  const blob = new Blob([exportData], { type: 'application/json' })
  // 创建URL对象
  const url = URL.createObjectURL(blob)
  // 创建a标签并设置下载属性
  const link = document.createElement('a')
  link.href = url
  link.download = `${res[0].symbol_name}.json` //res[0]为导出的json文件的名字
  // 模拟点击下载链接
  link.click()
  // 释放URL对象
  URL.revokeObjectURL(url)
}

//导入
const handleImport = () => {
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = 'application/json'
  input.onchange = async (event) => {
    const file = event.target.files[0]
    const importData = await readFileAsync(file)
    // importData为导入的数据
    console.log(importData, '导入的数据')
  }
  input.click()
}
const readFileAsync = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = () => {
      try {
        const data = JSON.parse(reader.result)
        resolve(data)
      } catch (err) {
        layx.msg('JSON文件格式错误，请检查您的文件！', { dialogIcon: 'error' })
      }
    }
    reader.onerror = reject
    reader.readAsText(file)
  })
}