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-uploadclass="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);
}