前端 读取/导入 Excel文档

情况: 需要通过Excel表,将数据导入到数据库,但是后台人员出差了,我又只会PHP,没用过node,所以只能前端导入Excel文件,然后循环调用后台的单条添加接口了。

库: Excel.js(版本4.3.0)

CDN地址:

<script src="https://cdn.bootcdn.net/ajax/libs/exceljs/4.3.0/exceljs.min.js"></script>

Excel.js 中文文档:https://gitee.com/alan_scut/exceljs

下面是动态Excel表单

在这里插入图片描述

下面是file文件(Excel文件)获取到的对象:

在这里插入图片描述

下面是代码中输出的需要插入的数据:

在这里插入图片描述

代码:

使用方法: importExcal()

// 全局函数执行完成后执行组件的钩子函数、组件事件、自定义事件// 导入Excel表
async function importExcal() {// 文件内容 (这里是从input file里面获取到的内容)var file = input_file;// 提交后端数据的整体数组var data_arr = [];// 行程的最大列数(包含前面不变的)var stay_col_num = 0;if (file) {// 判断文件类型let filetype = file.name.split('.')[file.name.split('.').length - 1]let filetypes = '.xlsx,.xls'if (filetypes.indexOf(filetype) === -1) {this.$message({message: '请上传 .xlsx 或 .xls 文件。',type: 'warning'})return;}// 读取文件文件const reader = new FileReader();// file.raw是具体的文件内容,需要看一下你获取到的是file.raw,还是file[0]即可 将文件转为 ArrayBuffer 格式console.log("这里是获取到的file文件内容:", file)// 这里要用 readAsArrayBuffer 转成buffer,因为下面读取要用到 buffer 才可以reader.readAsArrayBuffer(file.raw);reader.onload = function (event) {try {const result = event.target.result;var workbook = new ExcelJS.Workbook();// 读取 buffer 内容workbook.xlsx.load(result).then(async function () {// 迭代所有sheet (如果只有一个,可以通过名称获取 var worksheet = workbook.getWorksheet('My Sheet');)workbook.eachSheet(async function (worksheet, sheetId) {// 清空数据数组data_arr = [];// 获取 形成安排 的列数(从第8列开始的), 总不会超过100天,所以写个100// 在这里获取 形成列的长度,是因为这里是表头,不会像内容一样出现空白单元格,造成无法获取到最终列的情况for (let j = 8; j <= 100; j++) {// 当列到 行程安排 且,j+1 不是 行程安排的时候,就是行程安排的列宽if (worksheet.getCell(`${getLetter(j)}2`).value == '行程安排' && worksheet.getCell(`${getLetter(j + 1)}2`).value !== '行程安排') {stay_col_num = j;// 如果两个都有值的话,就跳出循环break;}}// 迭代工作表中具有值的所有行worksheet.eachRow(function (row, rowNumber) {// 数据是从第四行开始if (rowNumber >= 4) {// data_arr.push(row.values)// 每行的数据let row_data = row.values;// 传给后端的对象let data_obj = {"guest": "","name": "","sex": "","company": "","job": "","phone": "","stay": []}// 循环每行的数据row_data.map(function (item, index, arr) {// 如果是前7列,则是固定列的值,直接复制即可,否则的话则是 动态的行程安排if (index <= 7) {switch (index) {case 2:// 嘉宾类别data_obj.guest = item ? item : "";break;case 3:// 姓名data_obj.name = item ? item : "";break;case 4:// 性别data_obj.sex = item ? item : "";break;case 5:// 单位data_obj.company = item ? item : "";break;case 6:// 职务data_obj.job = item ? item : "";break;case 7:// 手机号data_obj.phone = item ? item : "";break;}} else {// 行程安排(从第八列开始到形成的最后一列结束)if (index >= 8 && index <= stay_col_num) {if (worksheet.getCell(`${getLetter(index)}${rowNumber}`).value == '是') data_obj.stay.push(worksheet.getCell(`${getLetter(index)}3`).value);}}})// 将插入后台的数据添加进数组data_arr.push(data_obj);}});console.log("全部需要插入数据库的数据的数组:", data_arr)// 这里使用了 Promise 解决在for循环内,使异步接口,进行同步提交的问题;文章后面有详细说明for (let i = 0; i < data_arr.length; i++) {let result_data = await createUser(data_arr[i]);if (!result_data.result) {// 如果出错,就跳出循环this.$message({message: `${i + 1} 行数据 ${data_arr[i].name}(${data_arr[i].phone}),由于 ${result_data.msg} 导入失败`,type: 'error'})// 跳出循环break;}}});});} catch (err) {this.$message({message: '读取文件错误',type: 'error'})console.log('err', err);}};} else {this.$message({message: '请选择文件',type: 'error'})}
}// 添加用户信息接口
async function createUser(data) {return await new Promise(function (resolve, reject) {// 处理异步逻辑时候调用resolve和reject函数axios({method: 'POST',url: `${base_url}/api/add`,headers: {// 没有可以不要token// authorization: `bearer ${token}`},// 数据data: data}).then(res => {let resp = res.data;if (resp.code == 1) {if (resp.data.code == 200) {resolve({"result": true});}} else {resolve({"result": false,"msg": resp.msg});}}).catch(req => {reject({"result": false,"msg": ""});});});
}// 获取第N个字母
function getLetter(num) {return String.fromCharCode(64 + num);
}

代码中用到的方法总结:

新建工作簿

var workbook = new ExcelJS.Workbook();

读取 buffer 内容

workbook.xlsx.load(data).then(function() {
// 其他代码
});

迭代所有sheet

workbook.eachSheet(function(worksheet, sheetId) {
// 其他代码
});

按名称获取表格

var worksheet = workbook.getWorksheet(‘My Sheet’);

按ID获取表格

var worksheet = workbook.getWorksheet(1);

迭代工作表中具有值的所有行

worksheet.eachRow(function(row, rowNumber) {
console.log(‘Row:’ + rowNumber + ’ = ’ + JSON.stringify(row.values));
});

获取单元格(A2)

var collectcell = worksheet.getCell(‘A2’);

for循环内,使异步接口变成同步提交
我文章的地址:

遇见的一些问题:
1. Excel.JS 支持的数据读取方式不同,获取的数据类型不同。例如:filestreambuffer

另外说一下
有兴趣的朋友也可以试试 SheetJS ,感觉好像功能更多一些,下次我再需要用到excel的时候也会尝试一下的。
SheetJS中文文档:https://github.com/rockboom/SheetJS-docs-zh-CN

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

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

相关文章

Spring源码-4.Aware接口、初始化和销毁执行顺序、Scope域

Aware接口 其实在生命周期中&#xff0c;Aware接口也参与进来了&#xff0c;如图所示&#xff1a; 如初始化时的第三步&#xff0c;其实就是调用了Aware相关接口。 以常见的Aware接口举例&#xff1a; 1.BeanNameAware 主要是注入Bean的名字 2.BeanFactoryAware 主要是时注…

拒绝拖延,从我做起!

拒绝拖延&#xff0c;从我做起&#xff01; 如果有一件事&#xff0c;对你的未来很重要&#xff0c;千万不要说等以后再做&#xff0c;这是无限拖延的借口【等有时间再做】的真正含义是&#xff0c;闲得无聊再去做&#xff0c;意味着事情即不重要也不紧急该做的重要事情不做&a…

移动端ViT新利器!苹果提出稀疏专家混合模型Mobile V-MoEs

文章链接&#xff1a;https://arxiv.org/abs/2309.04354 最近&#xff0c;专家混合模型MoE受到了学术界和工业界的广泛关注&#xff0c;其能够对任意输入来激活模型参数中的一小部分来将模型大小与推理效率分离&#xff0c;从而实现模型的轻量化设计。目前MoE已经在自然语言处理…

Talk | 纽约州立宾汉姆顿大学博士生丁琰:开放环境中机器人的任务与动作规划

本期为TechBeat人工智能社区第541期线上Talk。 北京时间10月26日&#xff08;周四&#xff09;20:00&#xff0c;纽约州立宾汉姆顿大学博士生—丁琰的Talk已准时在TechBeat人工智能社区开播&#xff01; 他与大家分享的主题是: “开放环境中机器人的任务与动作规划”&#xff0…

财务数字化转型是什么?_光点科技

财务数字化转型是当今企业发展中的一项关键策略&#xff0c;旨在借助先进的数字技术&#xff0c;重新塑造和优化财务管理体系&#xff0c;以适应迅速变化的商业环境。这一转型不仅仅是技术的升级&#xff0c;更是对企业财务理念和流程的全面升级和改革。 财务数字化转型的核心在…

Docker系列---【mysql容器手动停止后,重启服务器,mysql容器被删掉了,如何恢复mysql数据?】...

mysql容器手动停止后&#xff0c;重启服务器&#xff0c;mysql容器被删掉了&#xff0c;如何恢复mysql数据&#xff1f; 1.问题描述 为了快速搭建数据库&#xff0c;我使用了docker搭建数据库&#xff0c;由于服务器资源紧张&#xff0c;我想先把mysql容器停掉&#xff0c;启动…

vue ant DatePicker 日期选择器 限制日期可控范围

场景 限制当前日期之前不能选择 限制只能选择日期区间内 Ant Design Vue 效果 <a-date-picker :disabledDate"disabledDate"></a-date-picker>method // 限制日期选择disabledDate(current) {return current && current > moment().endOf(&…

LeetCode 1465. 切割后面积最大的蛋糕:纵横分别处理

【LetMeFly】1465.切割后面积最大的蛋糕&#xff1a;纵横分别处理 力扣题目链接&#xff1a;https://leetcode.cn/problems/maximum-area-of-a-piece-of-cake-after-horizontal-and-vertical-cuts/ 矩形蛋糕的高度为 h 且宽度为 w&#xff0c;给你两个整数数组 horizontalCut…

【Javascript】函数声明的方式

方式一&#xff1a; function c(a,b){return ab;}var sumc(3,4);console.log(sum); 方式二&#xff1a; var afunction (a,b){return ab;}; console.log(a(1,3)); 方式三&#xff1a; 构造声明 var cnew Function (a,b,return ab); console.log(c(1,2));声明函数过程中&…

BUUCTF刷题记录

[BJDCTF2020]Easy MD51 进入题目页面&#xff0c;题目提示有一个链接&#xff0c;应该是题目源码 进入环境&#xff0c;是一个查询框&#xff0c;无论输入什么都没有回显&#xff0c;查看源码也没什么用 利用bp抓包查看有没有什么有用的东西 发现响应的Hint那里有一个sql语句&…

设备管理软件管理系统

从设备检查到设备保养&#xff0c;再到设备维护&#xff0c;全方位视角掌握设备状态的管理软件。让企业员工可以随时随地的查看设备的各种信息&#xff1a;巡检信息、保养计划、备件更换提醒、维修保养资料等。 1、一物一码&#xff0c;建立设备电子档案“身份证” 精准管控每一…

如何通过内网穿透实现公网远程连接Redis数据库

公网远程连接Redis数据库【内网穿透】 文章目录 公网远程连接Redis数据库【内网穿透】前言1. Linux(centos8)安装redis数据库2. 配置redis数据库3. 内网穿透3.1 安装cpolar内网穿透3.2 创建隧道映射本地端口 4. 配置固定TCP端口地址4.1 保留一个固定tcp地址4.2 配置固定TCP地址…

Java 使用 poi 和 aspose 实现 word 模板数据写入并转换 pdf 增加水印

本项目所有源码和依赖资源都在文章顶部链接&#xff0c;有需要可以下载使用 1. 需求描述 从指定位置读取一个 word 模板获取业务数据并写入该 word 模板&#xff0c;生成新的 word 文档将新生成的 word 文档转换为 pdf 格式对 pdf 文档添加水印 2. 效果预览 word 模板 带水印的…

随笔:使用Python爬取知乎上相关问题的所有回答

项目中数据分析的需要自己从知乎某个专门的问题上爬数据&#xff0c;但众所周知&#xff0c;知乎的问题的显示方式有点胃疼&#xff08;指滑动后下翻加载更多回答&#xff0c;还经常卡住&#xff09;&#xff0c;翻了翻网上的教程发现有的要么就是很老了要么就是付费的&#xf…

【详细】Java网络通信 TCP、UDP、InetAddress

一、网络程序设计基础 1.局域网与因特网 为了实现两台计算机的通信&#xff0c;必须用一个网络线路连接两台计算机&#xff08;服务器<-->网络<-->客户机&#xff09;。 服务器是指提供信息的计算机或程序&#xff0c;客户机是指请求信息的计算机或程序。网络用…

基于java+swing+mysql实现的仓库商品管理系统

JavaSwingmysql用户信息管理系统 一、系统介绍二、功能展示三、项目相关3.1 乱码问题3.2 如何将GBK编码系统修改为UTF-8编码的系统&#xff1f; 四、其它1.其他系统实现 五、源码下载 一、系统介绍 本系统实现了两个角色层面的功能&#xff0c;管理员可以管理用户、仓库、商品…

Pinia中如何实现数据持久化操作

使用vue3中的pinia&#xff0c;我们可以在多个页面间共享数据&#xff0c;但是一旦我们关闭或刷新页面&#xff0c;这些数据就会丢失&#xff0c;因此&#xff0c;我们需要有一种数据持久化的解决方案。在记录vue3 使用vue3中的pinia&#xff0c;我们可以在多个页面间共享数据&…

【App 抓包提示网络异常怎么破?】

背景 当你测试App的时候,想要通过Fiddler/Charles等工具抓包看下https请求的数据情况,发现大部分的App都提示网络异常/无数据等等信息。以“贝壳找房”为例: 455 x 705 Fiddler中看到的请求是这样的: 619 x 215 你可能开始找证书的问题:是不是Fiddler/Charles的证书没有…

数字化工厂:连接、集成与数据融合

随着科技的不断发展&#xff0c;数字化工厂管理系统逐渐成为制造业的重要趋势。数字化工厂的核心在于连接、集成与数据融合&#xff0c;通过这些技术手段&#xff0c;实现对设备、生产线、工厂、供应商、产品、客户等各个环节的全面优化&#xff0c;提升企业的生产效率和产品质…

NET-MongoDB的安装使用

一&#xff0e;下载 MongoDB 点击 Select package 选择自己所需版本后点击下载&#xff0c;本文选用Windows 6.0版本以上 二、配置MongoDB 在 Windows 上&#xff0c;MongoDB 将默认安装在 C:\Program Files\MongoDB 中。 将 C:\Program Files\MongoDB\Server\version_numbe…