vue读取Excel数据

vue读取Excel数据

import * as XLSX from "xlsx"
npm install xlsx
<input type="file" ref="excelFileInput" @change="handleFileInputChange" accept=".xlsx,.xls" style="display: none;" />

<script setup>
const handleFileInputChange = (event) => {
  const file = event.target.files[0]
  if (!file) {
    return
  }
  handleImportExcelLogic(file)
  event.target.value = ''
}
const handleImportExcelLogic = (file) => {
  const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
    file.type === 'application/vnd.ms-excel'
  if (!isExcel) {
    ElMessage.error('只能上传 xls/xlsx 格式的文件！')
    return
  }
  const reader = new FileReader()
  reader.onload = (e) => {
    try {
      const data = new Uint8Array(e.target.result)
      const workbook = XLSX.read(data, { type: 'array' })
      const firstSheetName = workbook.SheetNames[0]
      if (!firstSheetName) {
        ElMessage.error('Excel 文件中没有找到有效的工作表。')
        return
      }
      const worksheet = workbook.Sheets[firstSheetName]
      const jsonData = XLSX.utils.sheet_to_json(worksheet, { defval: null })
      if (!jsonData || jsonData.length === 0) {
        ElMessage.warning('导入的 Excel 文件没有有效数据。')
        return
      }
      jsonData.forEach((excelRow) => {
        console.log(excelRow);
        tableData.value.push({
          PlanItemCode:excelRow["xxx"] || null,
        })
      })
    } catch (error) {
    }
  }
  reader.onerror = (error) => {
    ElMessage.error('文件读取失败，请重试。')
  }
  reader.readAsArrayBuffer(file) 
  console.log('FileReader.readAsArrayBuffer 已调用。')
}
</script>