使用Element Plus和xlsx库实现Excel文件导入功能

安装xlsx

yarn add xlsx

代码展示

1.封装代码

<template>
    <el-upload :auto-upload="false" accept=".xls,xlsx" :show-file-list="false" type="primary" :on-change="changeFile">
        <el-button type="danger">导入excel</el-button>
    </el-upload>
</template>

<script setup lang="ts">
let $emit = defineEmits(['importFile'])
import * as XLSX from 'xlsx'
// 导入excel
const changeFile = (e: any) => {
    // 1.和获取选中文件
    let file = e.raw //选中文件
    //2.引用二进制的方式读取选中文件的内容
    let myReader = new FileReader() //js中专门加载文件的对象
    myReader.readAsBinaryString(file) //用加载器加载文件(二进制的方式)
    // 3. 监听读取完毕的事件
    myReader.onload = (fileEvent: any) => {
        //使用xlxs读取数据结果,以字符编码的方式解析
        let myXls = XLSX.read(fileEvent.target.result, {
            type: 'binary'  //以字符编码的方式解析
        })
        let sheetName = myXls.SheetNames[0] //你要获取第几张表的数据-获取表名
        let jsonArr = XLSX.utils.sheet_to_json(myXls.Sheets[sheetName]) //把表格数据转换为JSON
        $emit('importFile', jsonArr) //传值
    }
}
</script>

注册全局组件

import ImportTable from "@/components/ImportTable.vue";
app.component("ImportTable", ImportTable); //全局注册组件

2.使用代码

<template>
  <div>
    <!-- 导入excel -->
    <ImportTable @importFile="fileE" />
    <!-- 动态渲染数据 -->
    <el-table :data="data.arr">
      <el-table-column v-for="key in keyArr" :key="key" :label="key" :prop="key" />
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { computed, reactive } from 'vue';

// 创建一个响应式对象来存储数据
let data = reactive<any>({
  arr: []
});

// 导入excel的回调函数
let fileE = (e: any) => {
  data.arr = e;
};

// 计算属性，根据data.arr的第一个对象动态生成表格列的keyArr
let keyArr = computed(() => {
  if (data.arr[0]) {
    return Object.keys(data.arr[0]);
  } else {
    return [];
  }
});
</script>