vue上传解析excel表格并修改字段名

目录

1.安装 xlsx

2.引入 

3.使用

1.安装 xlsx

npm install xlsx

2.引入 

import * as XLSX from 'xlsx';

3.使用

<template>
  <div class="UploadCptOutbox">
    <div class="Tooloutbox">
      <el-upload
        class="upload"
        ref="upload"
        accept=".xlsx, .xlsm, .xls"
        :auto-upload="false"
        action="#"
        :limit="1"
        :show-file-list="false"
        :multiple="false"
        :on-change="ImportExcel"
      >
        <el-button size="small" type="primary">上传</el-button>
      </el-upload>
    </div>
    <div class="TableOutbox">
    
    </div>
  </div>
</template>
<script>
import * as XLSX from "xlsx";
import { GenNonDuplicateID } from "@/utils/creatuniid";
export default {
  name: "UploadCpt",
  components: {
  },
  data() {
    return {};
  },
  methods: {
    // 导入表格
    ImportExcel(param) {
      // console.log(param);
      this.File2Xce(param)
        .then((item) => {
          if (item && item.length > 0) {
            // xlsxJson就是解析出来的json数据,数据格式如下
            // [{sheetName: sheet1, sheet: sheetData }]
            console.log(`导入表格---item`, item);
            this.QueryCodeTableData(item);
            if (item[0] && item[0].sheet && item[0].sheet.length) {
              this.tableData = item[0].sheet; //把数据塞到表格预览
            }
          }
        })
        .catch((error) => {
          loading.close();
        });
    },
    /**
     * 解析文件
     * @param {Object} file
     */
    File2Xce(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (e) => {
          const data = e.target.result;
          this.wb = XLSX.read(data, {
            type: "binary",
          });
          const result = [];
          this.wb.SheetNames.forEach((sheetName) => {
            let newSheet = this.RenameFields(
              XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
            );
            result.push({
              Name: sheetName,
              List: newSheet,
              Id: GenNonDuplicateID(13),
            });
          });
          /* console.log("解析")
          console.log(result) */
          resolve(result);
        };
        reader.readAsBinaryString(file.raw);
      });
    },
    //更新字段名
    RenameFields(data) {
      // 假设我们要修改字段名为新字段名
      const newFields = {
        分区名称: "GroupName",
        边界表名称: "CodeName",
        分区编号: "GroupNo",
        边界表位号: "Code",
        进出口关系: "Relation",
        //'旧字段名2': '新字段名2',
      };

      return data.map((row, index) => {
        const newRow = { ...row };
        Object.keys(newFields).forEach((oldKey) => {
          const newKey = newFields[oldKey];
          if (oldKey in row) {
            newRow[newKey] = row[oldKey];
            delete newRow[oldKey];
          }
        });
        newRow.Id = GenNonDuplicateID(16);
        return newRow;
      });
    },
    QueryCodeTableData(Data) {
      this.LoadingServeFun = this.$loading({
        lock: true,
        text: "数据加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let AreaListAll = [
        [
          {
            Id: "3575f073-0459-41cf-b2fb-ce25f2eebe91",
            AreaName: "区域1",
          },
          {
            Id: "0cfb0f17-8185-4f16-93b2-3c1088d55573",
             AreaName: "区域2",
          },
          {
            Id: "3543dade-baf0-47b4-aaed-f97181c1cd5f",
            AreaName: "区域3",
          },
        ],
       
      ];
      Data.map((ele, index) => {
        ele.AreaList = AreaListAll[index];
      });
      console.log(`QueryCodeTableData---Data`, Data);
      this.$store
        .dispatch("ConfigViewPageModule/QueryCodeTableDataFun", Data)
        .then(() => {
          this.$store.dispatch(
            "ConfigViewPageModule/ActiveItemQueryCodeTableDataFun",
            Data[0]
          );
          this.LoadingServeFun.close();
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.UploadCptOutbox {
  width: 100%;
  height: 100%;
  .Tooloutbox {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    width: 100%;
    height: 40px;
    .upload {
      margin-left: 20px;
    }
  }
  .TableOutbox {
    width: 100%;
    height: calc(100% - 40px);
  }
}
</style>

creatuniid.js

//生成指定长度的唯一ID
export function GenNonDuplicateID(randomLength) {
    return Number(
        Math.random()
        .toString()
        .substr(3, randomLength) + Date.now()
    ).toString(36);
}