Vue3+Vite实现Excel表格去重工具

Vue3+Vite实现Excel表格去重工具

一、需求

• Excel表格列中存在重复的数据，现想通过插件实现去重功能，具体需求为：
  • 选择要处理的Excel表格，支持.xlsx和.xls格式
  • 选择要处理的表格列
  • 对表格进行去重处理，去重的数据保留第一个数据，其余重复数据去重处理
  • 去重后的表格支持重命名后下载

二、实现

创建通过Vite创建Vue3.x项目请移步之前的博文，不再赘述，以下步骤以创建好项目后开始

1.导入Excel数据

• 借助Element Plus的Upload组件实现.xlsx或.xls数据的导入

// ExcelDeduplicaiton.vue
<template>
  <!-- Excel去重 -->
  <div class="deduplication">
      ...
      <el-upload :show-file-list="false" drag action :http-request="putinExcel">
          <div class="el-upload__text">
              拖入文件或点击上传Excel文件
          </div>
      </el-upload>
      ...
      <button @click="dedupExcel">表格去重</button>
      ...
      <button @click="downloadExcel">表格去重</button>
  </div>
</template>
<script setup>