exceljs读取el-upload上传的excle数据并转为json输出

当使用 Element UI 的 el-upload 组件上传 Excel 文件时,您可以使用 exceljs 库将上传的 Excel 数据转换为 JSON 格式。以下是一个示例代码,演示了如何在 Vue 项目中实现这一功能:

<template><el-uploadclass="upload-demo"action="/upload":on-success="handleSuccess":before-upload="beforeUpload"><el-button size="small" type="primary">点击上传</el-button></el-upload>
</template><script>
import ExcelJS from 'exceljs';export default {methods: {async handleSuccess(response, file, fileList) {// 读取上传的Excel文件const workbook = new ExcelJS.Workbook();await workbook.xlsx.load(file.raw);// 定义一个数组来存储JSON格式的数据const jsonData = [];// 获取第一个工作表const worksheet = workbook.getWorksheet(1);// 读取数据并转换为JSON格式worksheet.eachRow({ includeEmpty: true }, function(row, rowNumber) {if (rowNumber !== 1) { // 排除表头行let rowData = {};row.eachCell({ includeEmpty: true }, function(cell, colNumber) {// 使用单元格的列号作为JSON对象的键rowData[colNumber] = cell.value;});jsonData.push(rowData);}});// 输出JSON数据console.log(jsonData);},beforeUpload(file) {const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';if (!isExcel) {this.$message.error('只能上传xlsx格式的文件');}return isExcel;},},
};
</script>

在上述示例中,我们使用 el-upload 组件来实现文件上传功能,并使用 exceljs 库将上传的 Excel 文件转换为 JSON 格式的数据。在 handleSuccess 方法中,我们使用 ExcelJS 的 Workbook 类来加载上传的文件,并将其转换为 JSON 格式的数据。最后,我们将转换后的 JSON 数据输出到控制台。

// utils exceljsExport.ts文件
import moment from 'moment';export const exportToExcel = (exportDataList: any, getExcelColumns: any, name: any) => {const workbook = new ExcelJS.Workbook();const worksheet = workbook.addWorksheet('Sheet1');  worksheet.columns = getExcelColumns();worksheet.addRows(exportDataList);const time = moment().format('YYYYMMDDHHmmss');workbook.xlsx.writeBuffer().then((buffer) => {let blob = new Blob([buffer], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',});saveAs(blob, `${name}_${time}.xlsx`);});
};
// vue文件
const getExcelColumns = () => {const exportAddColumns = [{ prop: 'startTime', label: '开始充电时间' },{ prop: 'phoneNumber', label: '手机号' },{ prop: 'cmsOrderId', label: '订单编号' },{ prop: 'status', label: '订单状态' }];return exportAddColumns.map((item) => {let items = {header: item.label, key: item.prop};return items;});};exportToExcel(exportDataList, getExcelColumns, '订单');

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

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

相关文章

C++ day41 动态规划 整数拆分 不同的二叉搜索树

题目1&#xff1a;343 整数拆分 题目链接&#xff1a;整数拆分 对题目的理解 将正整数n&#xff0c;拆分成k个正整数的和&#xff08;k>2&#xff09;使得这些整数的乘积最大化&#xff0c;返回最大乘积 动规五部曲 1&#xff09;dp数组的含义以及其下标i的含义 dp[i]…

Verilog 入门(四)(门电平模型化)

文章目录 内置基本门多输入门简单示例 内置基本门 Verilog HDL 中提供下列内置基本门&#xff1a; 多输入门 and&#xff0c;nand&#xff0c;or&#xff0c;nor&#xff0c;xor&#xff0c;xnor 多输出门 buf&#xff0c;not 三态门上拉、下拉电阻MOS 开关双向开关 门级逻辑…

OSG编程指南<十七>:OSG光照与材质

1、OSG光照 OSG 全面支持 OpenGL 的光照特性&#xff0c;包括材质属性&#xff08;material property&#xff09;、光照属性&#xff08;light property&#xff09;和光照模型&#xff08;lighting model&#xff09;。与 OpenGL 相似&#xff0c;OSG 中的光源也是不可见的&a…

工博会新闻稿汇总

23届工博会媒体报道汇总 点击文章标题即可进入详情页 9月23日&#xff0c;第23届工博会圆满落幕&#xff01;本届工博会规模之大、能级之高、新展品之多创下历史之最。高校展区在规模、能级和展品上均也创下新高。工博会系列报道深入探讨了高校科技发展的重要性和多方面影响。…

【合集】MQ消息队列——Message Queue消息队列的合集文章 RabbitMQ入门到使用

前言 RabbitMQ作为一款常用的消息中间件&#xff0c;在微服务项目中得到大量应用&#xff0c;其本身是微服务中的重点和难点。本篇博客是Message Queue相关的学习博客文章的合集篇&#xff0c;目前主要是RabbitMQ入门到使用文章&#xff0c;后续会扩展其他MQ。 目录 前言一、R…

自定义链 SNAT / DNAT 实验举例

参考原理图 实验前的环境搭建 1. 准备三台虚拟机&#xff0c;定义为内网&#xff0c;外网以及网卡服务器 2. 给网卡服务器添加网卡 3. 将三台虚拟机的防火墙和安全终端全部关掉 systemctl stop firewalld && setenforce 0 4. 给内网虚拟机和外网虚拟机 yum安装 httpd…

阿里云国际短信业务网络超时排障指南

选取一台或多台线上的应用服务器或选取相同网络环境下的机器&#xff0c;执行以下操作。 获取公网出口IP。 curl ifconfig.me 测试连通性。 &#xff08;推荐&#xff09;执行MTR命令&#xff08;可能需要sudo权限&#xff09;&#xff0c;检测连通性&#xff0c;执行30秒。 m…

【华为OD题库-052】数字序列比大小-java

题目 A&#xff0c;B两个人玩一个数字比大小的游戏&#xff0c;在游戏前&#xff0c;两个人会拿到相同长度的两个数字序列&#xff0c;两个数字序列是不完全相同的&#xff0c;且其中的数字是随机的。 A&#xff0c;B各自从数字序列中挑选出一个数字进行大小比较&#xff0c;赢…

Scrapy框架中间件(一篇文章齐全)

1、Scrapy框架初识&#xff08;点击前往查阅&#xff09; 2、Scrapy框架持久化存储&#xff08;点击前往查阅&#xff09; 3、Scrapy框架内置管道&#xff08;点击前往查阅&#xff09; 4、Scrapy框架中间件 Scrapy 是一个开源的、基于Python的爬虫框架&#xff0c;它提供了…

HashMap的实现原理

1.HashMap实现原理 HashMap的数据结构&#xff1a; *底层使用hash表数据结构&#xff0c;即数组链表红黑树 当我们往HashMap中put元素时&#xff0c;利用key的hashCode重新hash计算出当前对象的元素在数组中的下标 存储时&#xff0c;如果出现hash值相同的key&#xff0c;此时…

自动化测试 —— 如何优雅实现方法的依赖!

在 seldom 3.4.0 版本实现了该功能。 在复杂的测试场景中&#xff0c;常常会存在用例依赖&#xff0c;以一个接口自动化平台为例&#xff0c;依赖关系&#xff1a; 创建用例 --> 创建模块 --> 创建项目 --> 登录。 用例依赖的问题 •用例的依赖对于的执行顺序有严格…

SpringBoot——Spring Security 框架

优质博文&#xff1a;IT-BLOG-CN 一、Spring Security 简介 Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架。它提供了一组可以在Spring应用上下文中配置的 Bean&#xff0c;充分利用了Spring IoC&#xff0c;DI&#xff0…

什么是 Proxy?

目录 Proxy 的作用 1. 流量过滤 2. 记录日志 3. 加快访问速度 4. 隐藏 IP 地址 Proxy 的分类 1. 按协议分类 - HTTP 代理&#xff1a;只支持 HTTP 协议的代理服务器&#xff0c;它可以缓存 HTTP 请求和响应并过滤 HTTP 流量。 - FTP 代理&#xff1a;只支持 FTP 协议的…

异常数据检测 | Python实现孤立森林(IsolationForest)异常检测

孤立森林(IsolationForest)异常检测 IsolationForest[6]算法它是一种集成算法(类似于随机森林)主要用于挖掘异常(Anomaly)数据,或者说离群点挖掘,总之是在一大堆数据中,找出与其它数据的规律不太符合的数据。该算法不采样任何基于聚类或距离的方法,因此他和那些基于距离的的…

一文讲透Python机器学习特征工程中的特征标准化

在Python中&#xff0c;可通过scikit-learn模块中的StandardScaler()函数实现对特征的标准化处理。StandardScaler()函数处理的数据对象同样是每一列&#xff0c;也就是每一维特征。StandardScaler()函数通过去除平均值和缩放到单位方差来标准化特征&#xff0c;将样本特征值转…

使用autodl服务器,在A40显卡上运行, Yi-34B-Chat-int4模型,并使用vllm优化加速,显存占用42G,速度18 words/s

1&#xff0c;演示视频 https://www.bilibili.com/video/BV1gu4y1c7KL/ 使用autodl服务器&#xff0c;在A40显卡上运行&#xff0c; Yi-34B-Chat-int4模型&#xff0c;并使用vllm优化加速&#xff0c;显存占用42G&#xff0c;速度18 words/s 2&#xff0c;关于A40显卡&#xf…

使用最小花费爬楼梯(力扣LeetCode)动态规划

使用最小花费爬楼梯 题目描述 给你一个整数数组 cost &#xff0c;其中 cost[i] 是从楼梯第 i 个台阶向上爬需要支付的费用。一旦你支付此费用&#xff0c;即可选择向上爬一个或者两个台阶。 你可以选择从下标为 0 或下标为 1 的台阶开始爬楼梯。 请你计算并返回达到楼梯顶…

使用canvas实现代码雨高级升阶版【附带源码和使用方法】

文章目录 前言基本绿色的彩色版本飘散雪花状后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;前端面试 &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和技术需要掌握&#xff0c;正在不断努力填补技术短板。(如果出现错误&…

SS8812T 36V/1.6A 两通道 H 桥驱动芯片 替代DRV8812

SS8812T 为打印机和其它电机一体化应用提 供一种双通道集成电机驱动方案。 SS8812T 有两 路 H 桥驱动&#xff0c;每个 H 桥可提供最大输出电流 1.6A (在 24V 和 Ta 25C 适当散热条件下)&#xff0c;可驱动两 个刷式直流电机&#xff0c;或者一个双极步进电机&#xff0…

2311skia,本地惊心动魄的编译skia的x86版本

首先,感谢steampp,这样可以随时访问github.不然,根本干不了活. 第一步,学习并下载skia 正确编译skia,有人家的辛苦工作 借用github action编译skia方法 本地编译的1个教程 对我来说,这一步是完成不了的: cd skia python2 tools/git-sync-deps //或者加上.exe变成 python2.ex…