vue 前端读取Excel文件并解析

前端读取Excel文件并解析

    • 前端如何解释Excel呢

平时项目中对于Excel的导入解析是很常见的功能,一般都是放在后端执行;但是也有特殊的情况,偶尔也有要求说前端执行解析,判空,校验等,最后组装成后端接口想要的数据结构。

前端如何解释Excel呢

因为我使用插件执行的 you know

  • 安装插件
npm install xlsx@0.14.1   // 0.14.1 是我使用的版本
  • 还有个nanoid
npm i nanoid 

此处我没有使用安装的这个 而是使用 自定的代码如下:

// index.js
const createId =  () => {return (Number(Math.random().toString().substr(2, 7) + Date.now()).toString(36) +Date.now())
}
export {createId as default,createId
}
  • 安装已经完成了 当然 依然 you know
import XLSX from 'xlsx'
import nanoid from 'xxxx/xxx/index'
  • 报一丝 差点忘记了 template
<el-upload class="upload" action="" :auto-upload="false" :show-file-list="false" :multiple="false" :on-change="(file, fileList) => importTemp(file, fileList)"><el-button v-permission="'are you ok'" type="primary" size="small" plain class="flex" >you know the name of the custom button</el-button></el-upload>
  • finally
methods: {importTemp(file, fileList) {const fileReader = new FileReader()fileReader.onload = ev => {try {const data = ev.target.resultconst workbook = XLSX.read(data, {type: 'binary'})const sheet = Object.keys(workbook.Sheets)[1] // 我是用的是第二个const json = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]) // const worksheet = workbook.Sheets[sheet]const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 })if (!jsonData.length) returnconst headers = jsonData[0]if (!headers.length) returnconst colorParam = headers.find(i => /xxx/.test(i))const transtypeParam = headers.find(i => /xxx/.test(i))const operationTypeParam = headers.find(i => /xxx/.test(i))const systemCodeParam = headers.find(i => /xxx/.test(i))const platCodeParam = headers.find(i => /xxx/.test(i))const truckingBillNoParam = headers.find(i => /xxx/.test(i))const delivyPlanTypeParam = headers.find(i => /xxx/.test(i))const targetObj = {}const nameMap = { // 定义必填的字段systemCode: systemCodeParam,platCode: platCodeParam,operationType: operationTypeParam,truckingBillNo: truckingBillNoParam,transType: transtypeParam,vehicleNumber: '车牌号',carColor: colorParam,driverName: '司机姓名',idcard: '司机身份证号',driverPhone: '司机手机号',clientCompanyCode: 'xxx',clientCompanyName: 'xxx名称',// messageBatchNo: 'xxx批次号',// detailsCounts: '明细条数',billId: 'xxx',billDependId: 'xxx',factoryBillId: 'xxx',delivyPlanType: delivyPlanTypeParam}for (let [idx, el] of json.entries()) {let tempObj = {}for (const key of Object.keys(nameMap)) {const value = el[nameMap[key]]if (!value && value !== 0) {this.$message.warning(`第${idx + 2}行,字段: ${nameMap[key]} 为必填值`)return}tempObj[key] = value}tempObj = {...tempObj,queueId: el['车辆排队号']}if (targetObj[tempObj.truckingBillNo]) {targetObj[tempObj.truckingBillNo].push(tempObj)} else {targetObj[tempObj.truckingBillNo] = [tempObj]}}const targetList = Object.keys(targetObj).map((key, i) => {const mainitem = targetObj[key][0]const target = {}Object.keys(mainitem).map(key => {if (!['qqq', 'xxxx', 'ssss', 'wwww'].includes(key)) {const val = (mainitem[key] + '').replace(/\s/gi, '')target[key] = ['null', 'undefined'].includes(val) ? '' : val // 判空下}})target.details = targetObj[key].map(item => {return {billId: item.qqq,billDependId: item.xxxx,factoryBillId: item.ssss,delivyPlanType: item.wwww}})target.detailsCounts = target.details.lengthtarget.messageBatchNo = nanoid() + ireturn target})// 后台请求接口import({ // 你自己的哦importDataList: targetList}).then(res => {const { msg, status } = resif (status) {this.$message.success('发送成功')} else {this.$message.error(msg ?? '操作失败')}})} catch (e) {console.log(e, 'error')}}fileReader.readAsBinaryString(file.raw)}
}
  • catch
    我的附件类型
    双人行也有我师焉:哎呦不错哦

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

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

相关文章

【大数据】利用 Apache Ranger 管理 Amazon EMR 中的数据权限

利用 Apache Ranger 管理 Amazon EMR 中的数据权限 1.需求背景简介2.系统方案架构图3.主要服务和组件简介3.1 Amazon EMR3.2 Simple Active Directory3.3 Apache Ranger 4.部署步骤4.1 部署 Simple AD 服务4.2 部署 Apache Ranger4.3 部署 Amazon EMR4.4 在 Amazon EMR 的主节点…

【数据结构】二叉树(带图详解)

文章目录 1.树的概念1.2 树的结构孩子表示法孩子兄弟表示法 1.3 相关概念 2.二叉树的概念及结构2.1 二叉树的概念2.2 数据结构中的二叉树-五种形态2.3 特殊的二叉树2.4 二叉树的存储结构顺序存储链式存储 2.5 二叉树的性质 3. 堆3.1 堆的定义3.2 堆的实现堆的结构堆的插入向上调…

java技术栈快速复习02_前端基础知识总结

前端基础 经典三件套&#xff1a; html&#xff08;盒子&#xff09;css&#xff08;样式&#xff09;JavaScript&#xff08;js&#xff1a;让盒子动起来&#xff09; html & css HTML全称&#xff1a;Hyper Text Markup Language(超文本标记语言)&#xff0c;不是编程语…

不科学上网使用Hugging Face的Transformers库

参考 Program Synthesis with CodeGen — ROCm Blogs (amd.com) HF-Mirror - Huggingface 镜像站 https://huggingface.co/docs/transformers/v4.40.1/zh/installation#%E7%A6%BB%E7%BA%BF%E6%A8%A1%E5%BC%8F 准备 apt show rocm-libs -a pip install transformers python …

计算机网络—数据链路层

一、数据链路层的基本概念 结点&#xff1a;主机、路由器 链路&#xff1a;网络中两个结点之间的物理通道&#xff0c;链路的传输介质主要有双绞线、光纤和微波。分为有线链路、无线链路 数据链路&#xff1a;网络中两个结点之间的逻辑通道&#xff0c;把实现控制数据协议的…

ABAP 查找第二代增强

文章目录 ABAP 查找第二代增强第一种方法-根据包去查找第二种方法-通过MODX_FUNCTION_ACTIVE_CHECK重要的表MODSAP表TFDIR表TFTIT表 ABAP 查找第二代增强 第一种方法-根据包去查找 第二种方法-通过MODX_FUNCTION_ACTIVE_CHECK 第二代增强&#xff08;基于函数模块的增强&…

git如何将多个commit合并成一个?

我们使用git进行版本控制&#xff0c;在本地开发完某个功能时&#xff0c;需要提交commit&#xff0c;然后push至开发分支。简单的功能还好&#xff0c;几个commit可能就好了。但是如果功能比较复杂&#xff0c;commit多达十几甚至几十个时&#xff0c;commit管理就会很冗长。比…

【IC设计】CRC(循环冗余校验)

目录 理论解读CRC应用CRC算法参数解读常见CRC参数模型 设计实战校招编程题分类串行输入、并行计算、串行输出**串行计算、串行输出&#xff08;线性移位寄存器&#xff09;LSFR线性移位寄存器&#xff08;并转串&#xff09;(并行计算)模二除 总结——串行、并行计算的本质参考…

成功解决STM32-No ST-LINK detected问题!

本文目录 一、原因二、解决方法一&#xff1a;有复位按键方法二&#xff1a;没有复位按键 一、原因 在之前一直都用的好好的&#xff0c;突然出现这个问题&#xff0c;原因只有两个&#xff1a; 接线松了&#xff0c;或者杜邦线损坏&#xff0c;换新的线试一下。上一次下载到…

【AI赋能演示力】:纯新人食用指南!ChatPPT万字实测报告

引言 随着科技的日新月异&#xff0c;人工智能已经深入到我们工作生活的方方面面&#xff0c;尤其是在提高效率与创新设计方面发挥着越来越重要的作用。 追溯至2023年3月&#xff0c;一款名为ChatPPT的人工智能驱动的PPT设计工具震撼登场并开启公测&#xff0c;标志着办公智能…

ORACLE 性能优化 高水位调节

当我需要去做优化时,有一个固定的优化思路:SQL优化->索引优化->分区优化->优化器hints优化 SQL 语句优化 1. 选用适合的 ORACLE 优化器 ORACLE 的优化器共有 3 种 : a. RULE ( 基于规则 ) b. COST ( 基于成本 ) c. CHOOSE ( 选 择性) 设置缺省的优化器, 可以通…

C语言贪吃蛇项目

今天给大家带来一款简单的贪吃蛇游戏&#xff0c;一起随我来看看吧 游戏效果&#xff1a; 实现基本的功能&#xff1a; • 贪吃蛇地图绘制 • 蛇吃⻝物的功能&#xff1a;&#xff08;上、下、左、右⽅向键控制蛇的动作&#xff09; • 蛇撞墙死亡 • 蛇撞⾃⾝死亡 • 计算得分…

paddleocr C++生成dll

目录 编译完成后修改内容: 新建ppocr.h头文件 注释掉main.cpp内全部内容&#xff0c;将下面内容替换进去。ppocr.h需要再环境配置中包含进去头文件 然后更改配置信息&#xff0c;将exe换成dll 随后右击重新编译会在根目录生成dll,lib文件。 注意这些dll一个也不能少。生成…

第七篇:专家级指南:Python异常处理的艺术与策略

专家级指南&#xff1a;Python异常处理的艺术与策略 1 引言 在编程的世界中&#xff0c;异常处理是一门必修的艺术。它不仅涉及到程序的错误处理&#xff0c;更广泛地影响着软件的稳定性、健壮性和用户体验。本篇文章将深入探讨Python中的异常处理&#xff0c;展示如何通过精心…

深度学习之基于YOLOv5智慧交通拥挤预警检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景 随着城市化进程的加速和人口规模的不断增长&#xff0c;交通拥挤问题日益严重。传统的交通拥挤预警方…

C++Day 7 作业

1、lambda #include <iostream>using namespace std;int main() {int a 100;int b 90;int temp;auto fun [&]()mutable->int {temp a;ab;btemp;};fun();cout<<a<<endl;return 0; } 2、vector #include <iostream> #include <vector>…

控制台主机不能运行,切换终端实现RPG运行

鄙人转载&#xff0c;主要是移植过程中使用小熊猫C2.25.1 过程中&#xff0c;字符集不同&#xff0c;导致某些空格 从bilibili专栏粘贴导致出现符号不匹配&#xff0c;但是编辑器不能替换 用原来的devc 5.11 发现问题&#xff0c;读出额外的英文&#xff1f; 使用文件替换&…

延时任务通知服务的设计及实现(二)-- redisson的延迟队列RDelayedQueue

一、接着上文 RDelayedQueue作为redisson封装的一个分布式延迟队列&#xff0c;直接拿来使用还是比较简单的。 本文主要包括以下几部分&#xff1a; 保存至延迟队列&#xff08;生产者&#xff09;读取延迟队列&#xff08;消费者&#xff09;从延迟队列移除任务 二、rediss…

什么品牌的洗地机好用性价比高?高性价比洗地机品牌推荐!

随着科技的发展&#xff0c;智能家居产品逐渐走入我们的生活&#xff0c;洗地机作为其中的代表之一&#xff0c;备受消费者关注。然而&#xff0c;面对市场上众多品牌的扫地机器人&#xff0c;消费者往往难以抉择。那么&#xff0c;洗地机哪个牌子好&#xff1f;为了给大家一个…

Unity 实现新手引导遮罩

Unity 复写OnPopulateMesh 实现新手引导遮罩、包含点击事件触发区域判断 https://download.csdn.net/download/shenliang34/89247117