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 = thisreader.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 = jsonDatathat.lineData = jsonData// 在这里处理读取到的数据};reader.readAsArrayBuffer(file);that.fileOpen = falsethat.$refs.cpkLine.lineData = this.tableData;that.LSL = this.form.lslthat.MBZ = this.form.targetValuethat.USL = this.form.uslsetTimeout(()=>{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;},

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

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

相关文章

git pull 时每次都要输入用户名和密码的解决办法

解决办法&#xff1a; git bash进入你的项目目录&#xff0c;输入&#xff1a; git config credential.helper store

知心早安问候语,愿你享受美好的时光,幸福快乐每一天

人生万里路&#xff0c;走好每一步&#xff0c;身体是本钱&#xff0c;平安是财富&#xff0c;开心就是护身符&#xff0c;健康才是摇钱树。新的一天&#xff0c;事事顺意&#xff01; 晨起福门开&#xff0c;快乐安康在&#xff0c;愉悦心态好&#xff0c;生活充满爱&#xf…

Qt报错整理-Q_DECLARE_METATYPE

1、Q_DECLARE_METATYPE 进行数据绑定时候&#xff0c;出现这个bug错。 error: C2338: Type is not registered, please use the Q_DECLARE_METATYPE macro to make it known to Qt。 原因&#xff1a;使用了QVariant::fromValue(user)&#xff0c;QVariant对象使用前需进行类…

DeepXDE学习笔记【1】——简单ODE方程求解

DeepXDE学习笔记【1】——简单ODE方程求解 1、背景 物理信息神经网络(PINN)自从2017年被提出&#xff0c;其应用范围在近两年也被挖掘的越来越广泛&#xff0c;除了可以解决物理方面的问题&#xff0c;信号处理、工程评估等等方向也开始有所涉及&#xff0c;所谓“物理数据双…

【软考】14.3 设计模式

《设计模式》 有下划线&#xff1a;类模式 / 对象模式无下划线&#xff1a;对象模式 创建型 设计模式 创建对象 构建器&#xff08;Builder&#xff09;&#xff1a;类和构造分离抽象工厂&#xff08;Abstract Factory&#xff09;&#xff1a;抽象接口工厂&#xff08;Factor…

MongoDB系例全教程

一、系列文章目录 一、MongoDB安装教程—官方原版 二、MongoDB 使用教程(配置、管理、监控)_linux mongodb 监控 三、MongoDB 基于角色的访问控制 四、MongoDB用户管理 五、MongoDB基础知识详解 六、MongoDB—Indexs 七、MongoDB事务详解 八、MongoDB分片教程 九、Mo…

如何在MacOS使用homebrew安装Nginx

文章目录 Homebrew安装nginxbrew启动Nginxbrew关闭Nginx 参考文章地址 Homebrew安装nginx 在确保MacOS 安装Homebrew成功以后&#xff0c;执行如下命令 brew install nginx注意&#xff1a;Nginx安装成功后会提示目录位置&#xff1b;每个人的系统可能因为Homebrew的安装位置…

【Linux学习笔记】进程概念(下)

进程地址空间1. 虚拟地址2. 什么是进程地址空间3. 进程地址空间的映射。4. 地址空间存在的意义5. 写时拷贝 进程地址空间 1. 虚拟地址 来看这样一段代码。 #include <stdio.h> #include <unistd.h>int global_value 100;int main() {pid_t id fork();if(id &l…

前端CSS

文章目录 引入标签的两大重要属性&#xff1a;区分标签class属性id属性学习CSS流程 CSS前言CSS层叠样式表1.CSS组成2.css语法结构3.注释语法4.引入css的多种方式 CSS选择器1.CSS基本选择器2.CSS组成选择器3.分组与嵌套4.属性选择器5.伪类选择器6.伪元素选择器 选择器优先级CSS继…

基于深度学习的水果识别 计算机竞赛

1 前言 Hi&#xff0c;大家好&#xff0c;这里是丹成学长&#xff0c;今天做一个 基于深度学习的水果识别demo 这是一个较为新颖的竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f9ff; 更多资料, 项目分享&#xff1a; https://gitee.com/dancheng-senior/pos…

什么情况会造成电表不走数?

电表是衡量用电量的重要设备&#xff0c;一旦出现不走数的情况&#xff0c;不仅会影响用户对用电量的准确计算&#xff0c;还可能造成电费纠纷。那么&#xff0c;究竟什么情况下会造成电表不走数呢&#xff1f;接下来&#xff0c;小编来为大家介绍下&#xff0c;一起来看下吧&a…

傅里叶分析和小波分析

从傅里叶变换到小波变换&#xff0c;并不是一个完全抽象的东西&#xff0c;可以讲得很形象。小波变换有着明确的物理意义&#xff0c;如果我们从它的提出时所面对的问题看起&#xff0c;可以整理出非常清晰的思路。 下面我就按照傅里叶-->短时傅里叶变换-->小波变换的顺…

Python---字符串切片-----序列名称[开始位置下标 : 结束位置下标 : 步长]

字符串切片&#xff1a;是指对操作的对象截取其中一部分的操作。字符串、列表、元组都支持切片操作。 本文以字符串为例。 基本语法&#xff1a; 顾头不顾尾&#xff1a; ----------类似range&#xff08;&#xff09; 范围&#xff0c;顾头不顾尾 相关链接Python----ran…

软考高项-案例部分

看到有技术人员出身做项目经理就要回答在信息系统工程中,开发和管理是两条不同的主线,开发人员所需要的技能与管理人员所需要的技能很不一样,角色定位可能不好、没有站在项目经理的角度管理项目,所以需要给他培训看到身兼数职就要回答可能没有多少时间去学习管理知识,去从…

python使用ffmpeg来制作音频格式转换工具(优化版)

简介:一个使用python加上ffmpeg模块来进行音频格式转换的工具。 日志: 20231030:第一版,设置了简单的UI布局和配色,实现音频转为Mp3、AAC、wav、flac四种格式。可解析音频并显示信息,可设置转换后的保存路径 UI界面: 编程平台:visual studio code 编程语言:python 3…

深孔枪钻厂家,发布社区工作管理软件明细

成都工具研究所有限公司的前身是成都工具研究所&#xff0c;于1956年创建于北京&#xff0c;是原机械工业部的直属研究所&#xff0c;是我国机械工业的综合性工具科研机构。公司&#xff1a;www.ctri.com.cn 公司主要从事精密切削工具、精密测量仪器以及表面改性处理技术的技术…

汇总公安局网站建设想法,QPQ盐浴氮化处理

功能描述 网站管理平台 1、主要功能&#xff1a;网站信息发布功能组件、文章数据转移、内容管理word导入发布、一键排版、统一互动、网站管理、权限分配管理 2、跨浏览器的后台管理界面&#xff0c;支持IE\FIREFOX\CHROME\SAFARI\OPERA及其他第三方浏览器&#xff1b; 3、系统…

SuperMap iServer 11i(2023)安全性提升汇总

作者&#xff1a;lisong 目录 账户信息合规度校验规则扩展功能图片验证码登录功能Web服务提供者密码加密数据库密码加密漏洞修复 SuperMap iServer 11i&#xff08;2023&#xff09;产品安全性相关的提升众多&#xff0c;涵盖账户安全、服务安全以及漏洞修复等方面&#xff0c;…

dockefile

文章目录 应用的部署MySql的部署Tomcat的部署 dockerfileDocker原理镜像的制作容器转镜像Dockerfile 服务编排Docker Compose Docker 私有仓库 应用的部署 搜索app的镜像拉去app的镜像创建容器操作容器中的app MySql的部署 容器内的网络服务和外部机器无法直接通信外部机器和…

NOIP2023模拟8联测29 C. 蛋糕

NOIP2023模拟8联测29 C. 蛋糕 文章目录 NOIP2023模拟8联测29 C. 蛋糕题目大意思路code 题目大意 你现在得到了一个二维蛋糕&#xff0c;它从左到右可以分成 n n n 列&#xff0c;每列高为 a i a_i ai​ 。对于每一列&#xff0c;又可以从下到上分为 a i a_i ai​ 块&#x…