Vue+elementui 纯前端实现Excel导入导出功能（区分表头标题）

引入插件 

import * as XLSX from "xlsx/xlsx.mjs";
import { read, utils } from 'xlsx/xlsx.mjs';

上传文件方法

 // 上传文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    async handle(ev) {
      //改变表格key值
      this.$refs.cpkTable.loading = true;
      this.$refs.cpkLine.myChart.showLoading({
        text: "加载中...",
        color: "#1890ff",
        textColor: "#1890ff",
        showSpinner: false,
        maskColor: "rgba(255, 255, 255, 0.7)",});
      this.tableKey = true;
      this.file = ev.raw;
      this.excelName = this.file.name;
      //截取表格文件名
      this.excelName = this.excelName.substring(
        0,
        this.excelName.lastIndexOf(".")
      );
      console.log("上传的未解析源文件", this.file);
      if (!this.file) {
        console.log("文件打开失败");
        return;
      } else {
        //<!-- 用来解析表头的代码-->
        // let data = await this.readFile(file);
        // let workbook = XLSX.read(data, { type: "binary" }); //解析二进制格式数据
        // console.log("二进制数据的解析:", workbook);
        // let worksheet = workbook.Sheets[workbook.SheetNames[0]]; //获取第一个Sheet
        // // 调用解析表头方法
        // this.getHeader(worksheet);
        // let result = XLSX.utils.sheet_to_json(worksheet); //转换为json数据格式
        // console.log("最终解析的 json 格式数据:", result);
        // this.tableData = result;
        // // 调用处理表头函数
        // this.setTable();
        //<!-- 用来解析表头的代码-->
        // 读取 Excel 文件
        //<!-- 不需要解析表头的代码-->
        const file = this.file;
        const reader = new FileReader();
        const that = this
        reader.onload = function(e) {
          const data = new Uint8Array(e.target.result);
          const workbook = read(data, { type: 'array' });
          const sheetName = workbook.SheetNames[0];
          const worksheet = workbook.Sheets[sheetName];
          const jsonData = utils.sheet_to_json(worksheet, { header: 1, raw: false, defval: '' });
          // const worksheet = workbook.Sheets[workbook.SheetNames[0]];
          // const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
          that.tableData = jsonData
          that.lineData = jsonData
          // 在这里处理读取到的数据
        };
        reader.readAsArrayBuffer(file);
        that.fileOpen = false
 
        that.$refs.cpkLine.lineData = this.tableData;
        that.LSL = this.form.lsl
        that.MBZ = this.form.targetValue
        that.USL = this.form.usl
        setTimeout(()=>{
          that.$message.success(this.excelName+'导入成功')
          that.$refs.upload.clearFiles();
          that.$refs.cpkTable.loading = false;
          that.$refs.cpkLine.myChart.hideLoading();
        },800)
        // that.tableLength = that.tableData.length
        // this.setTable()
        //<!-- 不需要解析表头的代码-->
      }
    },

解析获取到表头的数据

getHeader(sheet) {
      // const XLSX = XLSX;
      const headers = [];
      const range = XLSX.utils.decode_range(sheet["!ref"]); // worksheet['!ref'] 是工作表的有效范围
      let C;
      /* 获取单元格值 start in the first row */
      const R = range.s.r; // 行 // C 列
      let i = 0;
      for (C = range.s.c; C <= range.e.c; ++C) {
        var cell =
          sheet[
            XLSX.utils.encode_cell({ c: C, r: R })
            ]; /* 根据地址得到单元格的值find the cell in the first row */
        var hdr = "UNKNOWN" + C; // 如果有空表头，会替换为您想要的默认值replace with your desired default
        // XLSX.utils.format_cell 生成单元格文本值
        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);
        if (hdr.indexOf("UNKNOWN") > -1) {
          if (!i) {
            hdr = "__EMPTY";
          } else {
            hdr = "__EMPTY_" + i;
          }
          i++;
        }
        headers.push(hdr);
      }
      // 保存至data中
      this.excelHeader = headers;
      return headers;
    },

设置中英文映射 就是字段对应

    // 设置表格中英文映射
    setTable() {
      const headers = this.excelHeader;
      const excellist = this.tableData;
      const tableTitleData = []; // 存储表格表头数据
      const tableMapTitle = {}; // 设置表格内容中英文对照用
      headers.forEach((_, i) => {
        tableMapTitle[_] = "cord" + i;
        tableTitleData.push({
          prop: "cord" + i,
          label: _,
          width: 100,
        });
      });
      console.log("表格头标题：", tableTitleData);
      // 映射表格内容属性名为英文
      const newTableData = [];
      excellist.forEach((_) => {
        const newObj = {};
        Object.keys(_).forEach((key) => {
          newObj[tableMapTitle[key]] = _[key];
        });
        newTableData.push(newObj);
      });
      this.tableColumn = tableTitleData;
      this.tableData = newTableData;
    },