vue3前端解析excel文件

基础解析流程

项目开发中遇到需要前端解析excel文件，主要分为以下核心步骤：

1. 读取excel文件数据(二进制/缓冲区)
2. 解析为workbook(工作簿)对象
3. 提取目标工作表（worksheet）
4. 转换为JSON/数据可操作的格式

前端解析

使用 上传Excel后解析

安装XLSX库

npm install xlsx

vue代码

 <el-button type="primary" @click="updatefile">导入excel</el-button><!-- 隐藏的文件上传输入框 --><input ref="fileInputRef" type="file" accept=".xlsx, .xls" @change="handleFileUpload" style="display: none" /><el-table :data="tableList"><el-table-column label="表格1" prop="name1" /><el-table-column label="表格2" prop="name2" /><el-table-column label="表格3" prop="name3" /><el-table-column label="表格4" prop="name4" /><el-table-column label="表格5" prop="name5" /><el-table-column label="表格6" prop="name6" /><el-table-column label="表格7" prop="name7" /></el-table>

js代码

import { ref } from 'vue'
import * as XLSX from 'xlsx'
const message = useMessage()
const fileInputRef = ref()
const tableList = ref<any[]>([])
// 点击上传按钮触发文件选择
const updatefile = () => {if (fileInputRef.value) {fileInputRef.value.click()}
}
// 文件上传 
const handleFileUpload = (event: Event) => {const target = event.target as HTMLInputElementconst files = target.filesif(files && files.length > 0) {const file = files[0]// 检查文件类型const validTypes = ['application/vnd.ms-excel','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet','.xlsx','.xls']const isExcel = validTypes.some((type) => file.type.includes(type) || file.name.endsWith(type))if (!isExcel) {return message.error('请上传正确的文件格式')}const reader = new FileReader()try {reader.onload = async (e) => {const data = e.target?.resultconst workbook = XLSX.read(data, { type: 'array' })const sheetName = workbook.SheetNames[0]const worksheet = workbook.Sheets[sheetName]// 将工作表转换为json数据const jsonData = XLSX.utils.sheet_to_json(worksheet)tableList.value = jsonData}// 核心： 在 onload 定义后，调用 readAsArrayBuffer 触发读取reader.readAsArrayBuffer(file)// 可选：监听读取错误reader.onerror = () => {message.error('文件读取错误，请重试');}} catch (error) { console.log('error', error)}}
}