vue3采用xlsx库实现本地上传excel文件，前端解析成Json数据

需求：本地上传excel文件，但需要对excel文件的内容进行某些操作（增删改等）后再上传到后端服务器中，则需要前端解析excel文件。

好处：不使用后台读取Excel数据回显表格数据，减少前后端交互，降低后端服务器的压力，使用前端便可进行操作。

实现：通过xlsx库实现

1、下载依赖

npm install xlsx --save

2、页面使用

import * as XLSX from 'xlsx' // vue3可用此引入
import XLXS from "xlsx"; // vue2可用此引入

3、页面代码写法

  <input
     type="file"
     accept=".xls,.xlsx"
     class="upload-file"
   @change="changeExcel($event)" />

const tableData = ref([])
function changeExcel(e){
  const files = e.target.files
   if (files.length <= 0) {
      return false
    } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
      console.log('上传格式不正确，请上传xls或者xlsx格式')
      return false
    }
    // 读取表格
    const fileReader = new FileReader()
      fileReader.onload = ev => {
        const workbook = XLSX.read(ev.target.result, {
          type: "binary"
        })
        const wsname = workbook.SheetNames[0]
        const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])
        console.log('ws:',ws) // 转换成json的数据
        //  dealExcel(ws) ...对数据进行自己需要的操作 
        tableData.value = ws
    }
    fileReader.readAsBinaryString(files[0])
}

4、转换成的json数据不是我们需要数据结构，此时就能通过以下方法转换

• 转换前结构

• 转换后结构

• 转换的方法

function dealExcel(ws){
  let keymap = {  // 我们要转换的开头
    "员工": "name",
    "工号": 'num',
    "登录账号": 'account',
    "部门": 'department'
  }
  ws.forEach(sourceObj => {
    Object.keys(sourceObj).map(keys => {
      let newKey = keymap[keys]
      if (newKey) {
        sourceObj[newKey] = sourceObj[keys]
        delete sourceObj[keys]
      }
    })
  })
  tableData.value = ws
}