项目中需要实现点击导入excel文件后前端进行解析，将数据展示在页面上，确认后上传至后台的功能，为了便于用户查看，可将所有已上传至后台的数据重新展示在页面表格中。具体实现步骤如下：
1、下载插件
npm install xlsx --save
2.引入依赖
import * as XLSX from "xlsx"
3.导入功能实现
<template><div class="box"><inputtype="file"accept=".xls,.xlsx"@change="chooseExcel($event)"/></div></template>
<script setup lang="ts">function chooseExcel(e: any) {const files = e.target.files;if (files.length <= 0) {return false;} else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {ElMessage({message: "上传格式不正确，请上传xls或者xlsx格式！",type: "error",});return false;}// 读取表格数据const fileReader = new FileReader();fileReader.onload = (ev) => {const workbook = XLSX.read(ev.target.result, {type: "binary",cellDates: true,});const wsname = workbook.SheetNames[0];const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);dealExcel(ws); };fileReader.readAsBinaryString(files[0]);</script>
4.数据处理与转换
（1）实现代码如下：
function dealExcel(ws: any) {let exmap = {日期: "date",编号: "proNo",产品名称: "name",数量: "count",};ws.forEach((sourceObj: any) => {Object.keys(sourceObj).map((keys) => {let newKey = exmap[keys];if (newKey) {sourceObj[newKey] = sourceObj[keys];delete sourceObj[keys];}});});}
（2）效果如下：
转换后效果如下：
5.表格中日期处理
数据处理方法中加一段代码，如下：
if (ws != null && ws.length > 0) {for (var i = 0; i < ws.length; i++) {data.arrList.push({date: new Date(ws[i].date).toLocaleDateString(),proNo: ws[i].proNo,name: ws[i].name,count: ws[i].count,});}}
注意：处理前的时间为中国标准时间，若不是可考虑其他方法。转换后的数据展示采用vue3的数据绑定即可实现，此处不进行代码讲解。
欢迎大家留言，谢谢支持！
