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);
}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/647885.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据库(二)

DDL语句对数据库的操作&#xff1a; 创建&#xff1a;create database 数据库名 &#xff1b; 修改&#xff1a;alter database 数据库名 charset 字符集 &#xff1b; 删除: drop database 数据库名&#xff1b; 查询&#xff1a;show databases; DDL语句对表的操作 …

【C++】内存分区模型

目录 1.程序运行前 2.程序运行后 3. new操作符 3.1 基本语法 3.2 开辟数组 C程序在执行时&#xff0c;将内存大方向划分为4个区域 代码区&#xff1a;存放函数体的二进制代码&#xff0c;由操作系统进行管理的 全局区&#xff1a; 存放全局变量和静态变量以及常量栈区 …

时序分解 | MATLAB实现CEEMDAN+SE自适应经验模态分解+样本熵计算

时序分解 | MATLAB实现CEEMDANSE自适应经验模态分解样本熵计算 目录 时序分解 | MATLAB实现CEEMDANSE自适应经验模态分解样本熵计算效果一览基本介绍程序设计参考资料 效果一览 基本介绍 MATLAB实现CEEMDANSE自适应经验模态分解样本熵计算 包括频谱图 附赠案例数据 可直接运行 …

喜报|「云原生数据库PolarDB」、「阿里云瑶池一站式数据管理平台」揽获“2023技术卓越奖”

日前&#xff0c;国内知名IT垂直媒体&技术社区IT168公布2023年“技术卓越奖”评选结果&#xff0c;经由行业CIO/CTO大咖、技术专家及IT媒体三方的联合严格评审&#xff0c;阿里云瑶池数据库揽获两项大奖&#xff1a;云原生数据库PolarDB荣获“2023年度技术卓越奖”&#xf…

YOLOv5全网独家首发:Powerful-IoU更好、更快的收敛IoU,效果秒杀CIoU、GIoU等 | 2024年最新IoU

💡💡💡本文独家改进:Powerful-IoU更好、更快的收敛IoU,是一种结合了目标尺寸自适应惩罚因子和基于锚框质量的梯度调节函数的损失函数 💡💡💡MS COCO和PASCAL VOC数据集实现涨点 收录 YOLOv5原创自研 https://blog.csdn.net/m0_63774211/category_1251193…

《SPSS统计学基础与实证研究应用精解》视频讲解:数据加权处理

《SPSS统计学基础与实证研究应用精解》4.7 视频讲解 视频为《SPSS统计学基础与实证研究应用精解》张甜 杨维忠著 清华大学出版社 一书的随书赠送视频讲解4.7节内容。本书已正式出版上市&#xff0c;当当、京东、淘宝等平台热销中&#xff0c;搜索书名即可。本书旨在手把手教会使…

Redis 面试题 | 11.精选Redis高频面试题

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

CNN卷积理解

1 卷积的步骤 1 过滤器&#xff08;卷积核&#xff09;&#xff08;Filter或Kernel&#xff09;&#xff1a; 卷积层使用一组可学习的过滤器来扫描输入数据&#xff08;通常是图像&#xff09;。每个过滤器都是一个小的窗口&#xff0c;包含一些权重&#xff0c;这些权重通过训…

小红书如何做混部?

作者&#xff1a;宋泽辉&#xff08;小红书&#xff09;、张佐玮&#xff08;阿里云&#xff09; 编者按&#xff1a; Koordinator 是一个开源项目&#xff0c;是基于阿里巴巴内部多年容器调度、混部实践经验孵化诞生&#xff0c;是行业首个生产可用、面向大规模场景的开源混…

加速震荡交易策略

实盘开户找我哦~ # 加速震荡指标&#xff08;Accelerator Oscillator&#xff09; import talib import datetime import numpy as np def init(context): context.nday 5 #短期值 context.mday 20 #长期值 # 定义股票池 context.stocks [600519.SH,0003…

在 Linux 上搭建 Java 环境

目录 一、安装jdk 1. 挑选 jdk 版本 2. 安装 3. 验证 jdk 二、安装tomcat 1. 下载压缩包 2. 上传压缩包给 Linux &#xff08;需要用到 rz 命令&#xff09; 3. 解压压缩包&#xff08;需要用到 unzip&#xff09; 4. 进入 bin 目录 5. 给启动脚本增加可执行权限 6. 启…

sqlmap 是一个自动化的 sql 注入渗透工具

一.介绍 sqlmap 是一个自动化的 sql 注入渗透工具&#xff0c;指纹检测、注入方式、注入成功后的取数据等等都是自动化的&#xff0c;sqlmap 还提供了很多脚本.但在实践测试的时候基本用不上.用于检测和利用 Web 应用程序中的 SQL 注入漏洞。它自动化了识别和利用 SQL 注入漏洞…

Internet Download Manager 6.42.3 (IDM) 中文破解免激活绿色版

Internet Download Manager 6.42.3中文破解版&#xff0c;全球最佳下载利器。Internet Download Manager (简称IDM) 是一款Windows 平台功能强大的多线程下载工具&#xff0c;国外非常受欢迎。支持断点续传&#xff0c;支持嗅探视频音频&#xff0c;接管所有浏览器&#xff0c;…

将AWS iot消息数据发送S3

观看此文章之前&#xff0c;请先学习AWS iot的数据收集&#xff1a; 使用Linux SDK客户端向AWS Iot发送数据-CSDN博客 上述的文章向大家展示了如何从客户端向AWS iot发送数据&#xff0c;那么数据收到之后&#xff0c;我们如何通过AWS的服务进行数据处理或者保存呢&#xff1…

jmeter之接口测试实现参数化(利用函数助手),参数值为1-9(自增的数字)

1.前言 思考&#xff1a;为什么不用postman&#xff0c;用postman的话就得导入csv文件/json文件 如果不想导入文件&#xff0c;postman是实现不了&#xff0c;因为postman每次只会运行一次 2.jmeter函数助手实现参数化 &#xff08;1&#xff09;新建“线程组”--新建“http…

React16源码: React中commit阶段的invokeGuardedCallback的源码实现

invokeGuardedCallback 1 &#xff09;概述 在 commit 阶段中在 DEV 环境中调用了 invokeGuardedCallback 这个方法这个方法是在开发过程中被使用&#xff0c;用于捕获错误&#xff0c;协助开发调试的方法 2 &#xff09;概述 定位到 packages/shared/ReactErrorUtils.js#L4…

cartopy在地图中添加经纬线

文章目录 gridlines方法定义 gridlines gridlines可以根据坐标系&#xff0c;自动绘制网格线&#xff0c;这对于普通绘图来说显然不必单独拿出来说说&#xff0c;但在地图中&#xff0c;经纬线几乎是必不可少的&#xff0c;而随着投影方式的不同&#xff0c;经纬线未必与坐标框…

EasyCVR视频融合平台雪亮工程视频智能监控方案设计与应用

随着科技的不断发展&#xff0c;视频监控已经成为城市安全防范的重要手段之一。为了提高城市安全防范水平&#xff0c;各地纷纷开展“雪亮工程”&#xff0c;即利用视频智能监控技术&#xff0c;实现对城市各个角落的全方位、全天候监控。本文将介绍一种雪亮工程视频智能监控方…

01-在PATH中查找程序

需求分析 使用环境变量&#xff08;例如MAILER和PAGER&#xff09;的shell脚本都有一个隐藏的危险&#xff1a;有些设置指向的程序可能并不存在。如果你以前没有碰到过这种环境变量&#xff0c;那么应该将MAILER设置成你喜欢的电子邮件程序&#xff08;例如/usr/bin/mailx&…

【赠书第19期】跨平台机器学习:ML.NET架构及应用编程

文章目录 前言 1 ML.NET架构 1.1 简介 1.2 架构特点 2 应用编程 2.1 数据处理 2.2 模型训练 2.3 模型评估 3 优势与展望 3.1 优势 3.2 展望 4 推荐图书 5 粉丝福利 前言 随着大数据时代的来临&#xff0c;机器学习技术在各个领域的应用越来越广泛。为了满足不同平…