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>
...
</script>

2.处理Excel表格列

• 通过npm安装xlsx包处理Excel数据，安装xlsx依赖，依赖使用详情见：xlsx - npm (npmjs.com)

npm install xlsx

• 读取Excel数据，读取表格中的表头数据，分别生成生成数组

<script setup>
    // 引入xlsx依赖库
	import * as XLSX from 'xlsx';
    // 存放excel表格数据
    const excelFile = ref('')
    // 存放去重后导出的excel数据
    const exportData = ref('')
    ...
    // 读取excel文件
    const putinExcel = (file) => {
      // 上传文件名称数组集
      const fileTypeArr = file.file.name.split('.')
      // 当前文件类型校验
      const curFileType = fileTypeArr[fileTypeArr.length - 1];
      if (curFileType != 'xlsx' && curFileType != 'xls') {
        ElMessage.warning('请上传.xls/.xlsx格式的文件');
        return;
      }
      // 处理xlsx文件
      const reader = new FileReader();
      reader.onload = function (e) {
        const data = e.target.result;
        const workbook = XLSX.read(data, { type: 'binary' });
        // 默认处理的是excel表中的第一个工作薄（Sheet1）
        const sheetName = workbook.SheetNames[0];
    	excelFile.value = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);
      };
      reader.readAsArrayBuffer(file.file);
    }
    ...
</script>

• 此时通过XLSX.utils.sheet_to_json()方法处理的Excel数据已成为数组，去重就可以按照数组去重的方式进行，如：使用双层for循环+splice、indexOf、filter+indexOf、使用Map对象等；这里使用双层for循环方法去重处理

<script setup>
    ...
    // excel去重
    const dedupExcel = () => {
      // 深拷贝数据后再进行操作，保证原始数据完整性
      const dedupData = JSON.parse(JSON.stringify(excelFile.value));
      for (var i = 0; i < dedupData.length - 1; i++) {
        for (var j = i + 1; j < dedupData.length; j++) {
          if (dedupData[i][columnName.value] == dedupData[j][columnName.value]) {
            dedupData.splice(j, 1);
            // splice删除了一个元素，下标要减一，否则循环会漏掉一个元素(多个相邻的元素 可能会漏掉删除元素)
            j--;
          }
        }
      }
      exportData.value = dedupData
    }
    ...
</script>

3.下载处理后的Excel数据

• 将处理后的Excel数据重新生成工作薄和工作表并下载

<script setup>
const downloadExcel = () =>{
  // 最终处理后的excel数据格式文件，二维数组
  const output = [];
  // 处理为导出的excel文件
  exportData.value.forEach(item => {
    let row = [];
    columnOpts.value.forEach(key => {
      if (item[key]) {
        row.push(item[key]);
      } else {
        row.push('');
      }
    });
    output.push(row);
  });
  output.unshift(columnOpts.value);
  // 将统计结果转换为工作表格式;
  const newWorksheet = XLSX.utils.aoa_to_sheet(output);
  // 创建工作薄变量
  let newWorkbook = '';
  // 创建工作薄对象
  newWorkbook = XLSX.utils.book_new();
  // 将工作表加入工作薄中
  XLSX.utils.book_append_sheet(newWorkbook, newWorksheet);
  // 将工作薄写入文件
  XLSX.writeFile(newWorkbook, '去重后的Excel文件' + '.xlsx');
}
</script>