前端导入Excel表格获取数据(Vue3+TS+Element)

最新推荐文章于 2025-07-20 02:16:21 发布

唐钰Yo

最新推荐文章于 2025-07-20 02:16:21 发布

阅读量768

点赞数 4

CC 4.0 BY-SA版权

文章标签：前端 excel vue.js

本文链接：https://blog.csdn.net/weixin_50543490/article/details/137279320

本文介绍了如何在ElementPlus的上传组件中实现文件上传，重点讲解了如何处理上传的Excel文件，包括读取、解析为二进制格式并转化为JSON数据的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <el-upload
    ref="upload"
    class="upload-demo"
    :limit="1"
    :on-exceed="handleExceed"
    :show-file-list="false"
    action
    accept=".xlsx,.xls"
    :auto-upload="false"
    :on-change="handleChange"
  >
    <template #trigger>
      <el-button type="primary" :icon="Download" plain>导入</el-button>
    </template>
  </el-upload>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { genFileId } from 'element-plus'
import { Download } from '@element-plus/icons-vue'
//excel文件数据解析
import * as XLSX from 'xlsx'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'

const upload = ref<UploadInstance>()

const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}

interface tableConfigType {
  nam