【Vue】Vue3-前端json数据导入/导出Excel表格

需求

1. json数据导出为Excel表格，并下载
2. Excel数据转换为json数据

解决

json数据导出

安装依赖

npm install xlsx --save

使用

//在文件中
import * as XLSX from 'xlsx'

导出

//导出工序
const exportProcess = () => {
 let exportData = []
 //导出数据结构构造
 state.processData.forEach(item => {
   exportData.push({
     sort: item.sort,
     processName: item.processName ? item.processName : '',
     stdReward: item.stdReward ? item.stdReward : 0
   })
 })
 //导出表头设计
 let head = {
   sort: '序号',
   processName: '工序名称',
   stdReward: '单价'
 }
 //表头数据切换
const list = exportData.map(item => {
   const obj = {}
   for (const k in item) {
     if (head[k]) {
       obj[head[k]] = item[k]
     }
   }
   return obj
 })
 // 创建工作表
const data = XLSX.utils.json_to_sheet(list)
 // 创建工作簿
const wb = XLSX.utils.book_new()
 // 将工作表放入工作簿中
 XLSX.utils.book_append_sheet(wb, data, 'data')
 // 生成文件并下载
 XLSX.writeFile(wb, '导出工序.xlsx')
}

导出效果

导出列宽配置

excel表格导入

此处的方法导入绑定的位置是在组件的上传文件响应方法中
以element-plus举例，就是el-upload

const importXlsxFile = e => {
  console.log(e)
  const file = e.raw
  const reader = new FileReader()
  reader.readAsArrayBuffer(file)
  reader.onload = ev => {
    let data = ev.target.result
    const workbook = XLSX.read(data, { type: 'binary', cellDates: true })
    const wsname = workbook.SheetNames[0]
    const getData = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])
    console.log(getData)
  }
}

excel表格导入数据展示

excel表格表头切换

导出的表头切换没有分开写

// 这里我将日期和表格中文转换放在一起处理了
let head = {
   序号:'sort',
   名称: 'processName',
   单价: 'stdReward'
}

const formateData = data => {
  data.forEach(item => {
    Object.keys(item).map(keys => {
      let newKey = head[keys]
      if (newKey) {
        item[newKey] = item[keys]
        delete item[keys]
      }
    })
  })
  return data
}