前端实现Excel批量导入用户数据前言在我们日常开发中肯定会遇到批量导入这样的功能实现。后端:"小凌，你批量导出做的

前言

在我们日常开发中肯定会遇到批量导入这样的功能实现。

后端:"小凌，你批量导出做的这么优秀，批量导入也做了呗？"。

我:"为啥？这一般都是后端做的呀？"

后端:"你想一下，让用户上传一个文件岂不是要300-400K？如果你前端直接转成JSON数据给我岂不是减少了很多数据传输量？(主要是后端想直接存数据，不用写逻辑)"

秉承着解决问题提升自己的我决定接下这个任务。

流程图

组件设计

安装依赖

npm install -S xlsx

上传的组件

ExcelImport.vue


<template>
  <div class="excelImport">
    <input type="file" ref="upload" v-show="false" :accept="accept" />
  </div>
</template>
<script>
import XLSX from "xlsx";
export default {
  name: "excelImport",
  props: {
    accept: {
      // 允许上传的文件格式
      type: String,
      default: ".xls,.xlsx",
    },
    dataRow: {
      // 数据开始列 这个注意excel一定要有表头
      type: Number,
      default: 0,
      validator: (val) => {
        return val >= 0;
      },
    },
    valueMatch: {
      // 数据列 必须与excel中的表列顺序相对应
      type: Array,
    },
  },
  data() {
    return {};
  },
  methods: {
    cleanUpload() {
      // 清空input值
      this.$refs.upload.value = null;
    },
    // 文件上传事件
    handleFileChange(event) {
      // 这边也可以封装成多个文件上传的形式 目前是单个文件
      this.handleReadExcel(event.target.files[0]);
    },
    // （重点）把文件按照二进制读取
    handleReadExcel(file) {
      const fileReader = new FileReader();
      fileReader.onload = (ev) => {
        try {
          const fileData = ev.target.result;
          const workbook = XLSX.read(fileData, {
            type: "binary",
          });
          const wsname = workbook.SheetNames[0]; // 取第一张表(也可以取多个sheet)
          const snArr = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); // 生成json表格内容
          this.excelDataToJson(snArr);
        } catch (e) {
          console.log(e);
          return false;
        }
      };
      fileReader.readAsBinaryString(file);
    },
    // 表格数据转换
    excelDataToJson(snArr) {
      let retn = [];
      // 如果数据不在第一列 则到相应列去取数据
      if (this.dataRow) {
        snArr = snArr.slice(this.dataRow, snArr.length);
      }
      // 如果不用匹配数据则直接返回原始数据
      if (!this.valueMatch || this.valueMatch.length === 0) {
        // 输出原始数据自己在组件外进行处理
        this.$emit("changeExcel", snArr);
      }
      // 获取一个元素的key值（excel表格原始的key）
      let snKeys = Object.keys(snArr[0]);
      snArr.forEach((snItem) => {
        let pushItem = {};
        // 匹配我们传入的新属性
        this.valueMatch.forEach((item, index) => {
          pushItem[item] = snItem[snKeys[index]];
        });
        retn.push(pushItem);
      });
      // 输出匹配后的数据
      this.$emit("changeExcel", retn);
    },
    // 打开上传
    open() {
      this.$nextTick(() => {
        this.$refs.upload.click();
      });
    },
  },
  mounted() {
    // 绑定更改事件监听
    this.$nextTick(() => {
      this.$refs.upload.removeEventListener("change", this.handleFileChange);
      this.$refs.upload.addEventListener("change", this.handleFileChange);
    });
  },
  beforeDestroy() {
    // 移除更改事件监听
    this.$refs.upload.removeEventListener("change", this.handleFileChange);
  },
};
</script>

使用样例

ExcelImportPage.vue

<template>
  <div class="excelImport">
    <button @click="toImport">导入Excel</button>
    <excel-import
      ref="uploadExamFile"
      @changeExcel="uploadExamFile"
      accept=".xls,.xlsx"
      :dataRow="1"
      :valueMatch="valueMatch"
    ></excel-import>
    <!-- 展示数据 -->
    <table border v-if="dataList && dataList.length > 0">
      <!-- 表头 -->
      <tr>
        <th v-for="hItem in valueTitle" :key="hItem">{{ hItem }}</th>
      </tr>
      <!-- 数据 -->
      <tr v-for="(item, index) in dataList" :key="index">
        <td v-for="jItem in valueMatch" :key="jItem">{{ item[jItem] }}</td>
      </tr>
    </table>
  </div>
</template>
<script>
import ExcelImport from "./ExcelImport";
export default {
  name: "excelImportPage",
  data() {
    return {
      valueMatch: ["name", "sex", "age", "phone", "department", "position"], // 数据列 必须与excel中的表列顺序相对应
      valueTitle: ["姓名", "性别", "年龄", "联系方式", "部门", "职位"],
      dataList: [],
    };
  },
  methods: {
    // 获取数据
    uploadExamFile(data) {
      console.log("导出的数据", data);
      this.dataList = data;
    },
    toImport() {
      this.$refs.uploadExamFile.open();
    },
  },
  components: {
    ExcelImport,
  },
};
</script>

使用效果