前端做excel的录入解析,将excel的数据传给后端,显示在页面上。

具体的流程如图所示:

1.点击excel录入按钮 

2.打开弹框

 3.点击上传按钮,会自动打开计算机本地文件,选择想上传的文件,点击打开

 4.会将excel的数据解析成一个表格,可以在表格中做删除操作,点击确定

 5.将excel的人员与系统中的人员做一个对比,若不在系统中,则无法录入。

 6.最后将刚刚加入的人,和以前本来就在表中的人,一起显示在页面上。

 

 其中,具体要介绍的是本地的excel表格的数据是如何解析渲染在网页中。确保excel的数据一定是有姓名和出生年月,否则作废不渲染。

下载安装xlsx并引入

npm i xlsx -S

import * as xlsx from "xlsx";

1.首先写一个文件上传的按钮

 <input class="filePrew" type="file" ref="file"accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"id="file" @change="getFileSize"/>

2.在方法中写:在这一步就将文件获取,并判断excel中是否包含了姓名和出生年月,同时自己要定义一个默认的表头

 tableArr: [{ label: "姓名", prop: "xm", index: "1", width: "60px" },{ label: "出生年月", prop: "csnyStr", index: "2",width: "80px" },{ label: "任免类型", prop: "RmType", index: "3" , width: "100px"},{ label: "拟任职", prop: "nrz", index: "4", width: "100px" },{ label: "拟免职", prop: "nmz", index: "5",width: "100px"},{ label: "任免后职务层次", prop: "SetZwjb", index: "6" },{ label: "任免后公务员职级", prop: "rmhgwyzj", index: "7" }],
getFileSize(v) {if (v.target.value) {this.file = v.target.files[0];// 读取 Excel 文件let file = this.file;file = new Blob([file]);console.log(file);const fileReader = new FileReader();fileReader.readAsArrayBuffer(file);fileReader.onload = () => {// 将文件转换为二进制数据const data = new Uint8Array(fileReader.result); // 使用 SheetJS 解析 Excel 文件const workbook = xlsx.read(data, { type: "array" }); // 获取第一个工作表const worksheet = workbook.Sheets[workbook.SheetNames[0]]; // 将工作表数据转换为 JSON 格式 // 分析对应关系const jsonData = xlsx.utils.sheet_to_json(worksheet, { header: 1 }); // 表头序号 0 1 2 3const columnNames = Object.keys(jsonData[0]);const columnKeyName = jsonData[0];if (columnKeyName.indexOf("姓名") >= 0 &&columnKeyName.indexOf("出生年月") >= 0) {for (let i = 1; i < jsonData.length; i++) {let person = {};for (let str in this.tableArr) {let col = this.tableArr[str].label;let index = columnKeyName.indexOf(col);if (index >= 0) {let val = jsonData[i][index];person[this.tableArr[str].prop] = val;}}this.tabelDataExcel.push(person);}console.log(this.tabelDataExcel);}// 清空上传列表v.target.value = "";console.log("jsonData:", jsonData);console.log("columnNames:", columnNames);console.log("columnKeyName:", columnKeyName);};}},

3.这样我们拿到了Excel的值后,就可以将每行数据传递给后端做处理。

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

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

相关文章

Mac的docker安装redis

Mac的docker安装redis 1、docker search redis NAME DESCRIPTION STARS OFFICIAL AUTOMATED redis Redis is an open source key-value store that… 12205 …

七大排序算法——快速排序,通俗易懂的思路讲解与图解(完整Java代码)

文章目录 一、排序的概念排序的概念排序的稳定性七大排序算法 二、快速排序核心思想Hoare法挖坑法前后指针法(选学) 三、性能分析四、算法优化优化基准的选取优化少量数据时的排序方案优化后的完整代码 五、七大排序算法 一、排序的概念 排序的概念 排序&#xff1a;所谓排序…

DNS协议解析原理

0. 前言 为了保证网址的正常访问&#xff0c;域名解析协议&#xff08;DNS&#xff09;其实在背后做出了很多努力&#xff0c;本文将透彻讲解 DNS 协议的原理&#xff0c;了解我们每天都在接触的网址到底是怎么工作的。 1. 什么是 DNS 协议 在学习 DNS 协议之前&#xff0c;我…

前端uni-app自定义精美全端复制文本插件,支持全端文本复制插件 可设置复制按钮颜色

随着技术的发展&#xff0c;开发的复杂度也越来越高&#xff0c;传统开发方式将一个系统做成了整块应用&#xff0c;经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改&#xff0c;造成牵一发而动全身。 通过组件化开发&#xff0c;可以有效实现…

一场内容生产的革命 :从PGC、UGC到AIGC

1 概念解读 1.1 什么是PGC&#xff1f; PGC 是指专业生成内容&#xff08;Professional Generated Content&#xff09;&#xff0c;它指的是由专业的内容创作者或团队进行创作、编辑和发布的内容。PGC创作方式起源于传统媒体时代&#xff0c;如报纸、杂志、电视和电影等&…

【沐风老师】3DMAX灯光放置插件LightPlacer使用方法教程

3DMAX灯光放置插件LightPlacer使用方法 3DMAX灯光放置插件LightPlacer&#xff0c;用于3dMax放置和管理灯光的插件&#xff0c;可以在3dMax中一键制作所需的灯光&#xff0c;且通过插件创建出来的灯光属性可以在该面板下进行直接修改&#xff0c;并不需要切换至堆栈。该插件的有…

城市餐饮油烟的监测与治理

摘要&#xff1a;为控制餐饮油烟污染&#xff0c;改善城市大气污染和生态环境&#xff0c;针对城市餐饮油烟污染现状&#xff0c;提出相应的治理政策。加快餐饮油烟污染立法进度&#xff0c;推进相关法律法规修订&#xff0c;加大油烟污染执法力度&#xff1b;维护清洗油烟净化…

MySQL(备份还原索引视图入门)

文章目录 第一节 备份和还原1、题目2、题目作答 第二节 索引1.题目2.题目作答 第三节 视图1 题目2 题目作答 第一节 备份和还原 1、题目 CREATE DATABASE beifen;use beifen;CREATE TABLE books(bk_id INT NOT NULL PRIMARY KEY,bk_title VARCHAR(50) NOT NULL,copyright YEA…

MOVEit再现新漏洞,多个版本受影响

今年6月&#xff0c;文件共享工具MOVEit Transfer曾曝出SQL 注入漏洞&#xff0c;能让远程攻击者访问其数据库并执行任意代码。最近&#xff0c;MOVEit Transfer 母公司Progress Software又披露了三个新漏洞。 这三个漏洞分别是 CVE-2023-36932、CVE-2023-36933 和 CVE-2023-36…

07_flash全擦除实验

07_flash全擦除实验 1. SPI 协议1.1 SPI 协议1.2 SPI 物理层1.3 SPI 协议层1.3.1 SPI 通讯模式时序图1.3.2 CPHA0 时的 SPI 通讯模式1.3.3 CPHA1 时的 SPI 通讯模式 2. 实验目标3. SPI-Flash 芯片3.1 硬件资源3.2 板载 Flash 原理图3.3 操作时序3.3.1 全擦除时序3.3.2 写使能时…

CDN技术(Content Delivery Network,内容分发网络)分布式网络架构(CND与P2P(Peer-to-Peer)区别)

文章目录 CDN是什么&#xff1f;CDN的优势CDN的应用1. 静态内容加速2. 动态内容加速3. 视频流媒体4. 软件分发5. 游戏加速6. 移动应用加速 CDN收费吗&#xff1f;CND与P2P区别什么是静态内容和动态内容&#xff1f; CDN是什么&#xff1f; CDN&#xff08;Content Delivery Ne…

html相关面试题

html相关面试题 1.html和css中的图片加载与渲染规则是什么样的&#xff1f;2.title与h1的区别、b与strong的区别、i与em的区别&#xff1f;title 和 h1 的区别b 和 strong 的区别i 和 em 的区别最后 3.script 标签为什么建议放在 body 标签的底部&#xff08;defer、async&…