Vue 中导入 Excel 文件

<template>
  <el-upload
    action=""
    :auto-upload="false"
    :on-change="handleFileChange"
    accept=".xlsx, .xls"
  >
    <el-button type="primary">点击上传Excel文件</el-button>
  </el-upload>

  <el-table :data="tableData" style="width: 100%" v-if="tableData.length">
    <el-table-column
      v-for="(header, index) in tableHeaders"
      :key="index"
      :prop="header"
      :label="header"
    />
  </el-table>
</template>

<script>
import * as XLSX from 'xlsx'

export default {
  data() {
    return {
      tableData: [],
      tableHeaders: []
    }
  },
  methods: {
    handleFileChange(file) {
      const reader = new FileReader()
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result)
        const workbook = XLSX.read(data, { type: 'array' })
        const firstSheetName = workbook.SheetNames[0]
        const worksheet = workbook.Sheets[firstSheetName]
        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
        
        if (jsonData.length > 0) {
          this.tableHeaders = jsonData[0]
          this.tableData = jsonData.slice(1).map(row => {
            const obj = {}
            this.tableHeaders.forEach((header, index) => {
              obj[header] = row[index] || ''
            })
            return obj
          })
        }
      }
      reader.readAsArrayBuffer(file.raw)
    }
  }
}
</script>