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

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

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

实现：通过xlsx库实现

1、下载依赖

npm install xlsx--save

2、页面使用

import*asXLSXfrom'xlsx'// vue3可用此引入
importXLXSfrom"xlsx";// vue2可用此引入

3、页面代码写法

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

const tableData=ref([])
functionchangeExcel(e){const files= e.target.filesif(files.length<=0){returnfalse}elseif(!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())){
      console.log('上传格式不正确，请上传xls或者xlsx格式')returnfalse}// 读取表格const fileReader=newFileReader()
      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数据不是我们需要数据结构，此时就能通过以下方法转换

• 转换前结构

• 转换后结构

• 转换的方法

functiondealExcel(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}