Vue3 + Element Plus 导入功能

ElementPlus

<script setup lang="ts">

import { reactive, ref } from 'vue'
import * as XLSX from 'xlsx';


function readExcel(uploadFile) {

  return new Promise((resolve, reject) => {
    debugger
    const file = uploadFile.raw
    if (!file) {
      resolve(null);
      return
    }
    const reader = new FileReader();
    reader.onload = function (e) {
      const bytes = e.target.result;
      const workbook = XLSX.read(bytes, {
        type: 'binary'
      });
      // 获取第一个工作表
      const sheetName = workbook.SheetNames[0]
      const worksheet = workbook.Sheets[sheetName]

      // 将工作表转换为JSON
      const data = XLSX.utils.sheet_to_json(worksheet, { header: 1 })

      if (data.length === 0) {
        throw new Error('Excel文件为空')
      }

      // 获取表头
      const headers = data[0]

      // 查找"监测地点"列
      const locationColumnIndex = headers.findIndex(
        (header) => typeof header === 'string' && header.includes('监测地点')
      )

      // 查找"搜索名"列
      const searchColumnIndex = headers.findIndex(
        (header) => typeof header === 'string' && header.includes('搜索名')
      )

      // 提取数据行（跳过标题行）
      const rows = []
      for (let i = 1; i < data.length; i++) {
        const row = data[i]
        // 确保行数据存在且监测地点不为空
        if (row && row[locationColumnIndex] && row[locationColumnIndex].toString().trim() !== '') {
          rows.push(row)
        }
      }

      resolve({
        headers: headers,
        data: rows,
        locationColumnIndex: locationColumnIndex,
        searchColumnIndex: searchColumnIndex,
        originalLocationColumnIndex: locationColumnIndex // 保存原始位置列索引
      });
    };

    reader.readAsArrayBuffer(file)
  })

}

</script>

<template>

<el-upload
      class="upload-demo"
      action="#"
      :auto-upload="false"
      :on-change="handleFileChange"
      accept=".xlsx,.xls"
      drag
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>