vue3前端解析excel文件

基础解析流程

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

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

前端解析

使用上传Excel后解析

安装XLSX库

javascript 复制代码

npm install xlsx

vue代码

javascript 复制代码

 <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代码

javascript 复制代码

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 HTMLInputElement
  const files = target.files
  if(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?.result
  
        const 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)
    }
  }
}