纯前端实现 导入 与 导出 Excel

最近经常在做 不规则Excel的导入,或者一些普通Excel的导出,当前以上说的都是纯前端来实现;下面我们来聊聊经常用到的Excel导出与导入的实现方案,本文实现技术栈以 Vue2 + JS 为例

导入分类:

  1. 调用 API 完全由后端来解析数据,清洗数据,前端只负责调用 API
  2. 前端解析 Excel ,清洗数据,把对应的数据处理成 API需要的 JSON;(本文主要介绍这个)

导出分类:

  1. 调用API 完全由后端来生成Excel,前端获得 API 返回的文件名,下载即可;
  2. 前端根据 JSON 数据来生成 Excel, 然后利用第三方库 file-saver 进行下载;(本文主要介绍这个)

导入 Excel 需要用到 xlsx 这个 npm 库

导出 Excel 需要用到 exceljs , file-saver 这两个

直接 npm install 对应库即可;

1. 导入Excel,处理数据

1.1 需求示例

在这里插入图片描述

假如我现在有一个这种 Excel 需要导入,前端负责解析 Excel,清洗数据,API 只需要 4-5 个有用的字段

1.2 具体实现 – html 部分

<section><el-button @click="handleUpload" size="mini" type="primary">{{l("ChooseFile")}}</el-button><input v-show="false" @change="handleFileChange" ref="inputFile" type="file" /><el-alert type="warning" :closable="false" style="margin-top:6px;">{{'Please Upload (xls | xlsx) Type File'}}</el-alert>
</section>
import XLSX from "xlsx";handleUpload() {if (!this.importResult) {this.$refs["inputFile"].click();}
},
handleFileChange(e) {const file = e.target.files[0];const fileName = file.name.substring(file.name.lastIndexOf(".") + 1);if (fileName !== "xlsx" && fileName !== "xls") {this.$message.error(this.l("FileTypeError,PleaseTryAgain"));return;}const reader = new FileReader();reader.readAsBinaryString(file);reader.onload = (e) => {const result = e.target.result;if (!result) {this.errorMsg = this.l("NoData");this.step = 1;return;}if (this.importType === 1) {this.handleSinglePageExcel(result);} else {this.handleMultiplePageExcel(result);}};reader.onerror = (err) => {throw new Error("UpLoadError: " + err.stack);};},

1.3 具体实现 – 单个 sheet

handleSinglePageExcel(data) {const wb = XLSX.read(data, {type: "binary",cellDates: true,});const sheet = wb.SheetNames[0];const importData = XLSX.utils.sheet_to_json(wb.Sheets[sheet], {range: -1,});const arr = [];for (let i = 3; i < importData.length; i++) {// 处理业务逻辑}this.importResult = arr;
},

1.4 具体实现 – 多个 sheet

handleMultiplePageExcel(data) {const wb = XLSX.read(data, {type: "binary",cellDates: true,});const sheetList = wb.SheetNames;const arrMap = {}; // 多 Sheet 页数据;sheetList.forEach((t) => {const importData = XLSX.utils.sheet_to_json(wb.Sheets[t], {range: 2,});arrMap[t] = importData;});const arr = [];for (let t in arrMap) {const importData = arrMap[t];// importData : 代表每个 Sheet 页的 Excel 数据}this.importResult = arr;
},

1.4 相关参数

文件读取类型

类型预期输入
base64Base64编码类型字符串
binary二进制字符串(字节n是data.charCodeAt(n))
stringJS字符串(仅适用于UTF-8文本格式)
buffernodejs的buffer类型
array数组
file将被读取的文件路径(仅限nodejs)

常用方法

  • sheet_to_* 函数接受一个工作表和一个可选的options对象,主要是将excel文件转化为对应的数据格式,一般导入excel文件的时候使用
  • *_to_sheet 函数接受一个数据对象和一个可选的options对象,主要是将数据格式转化为excel文件,一般导出文件的时候使用
  • sheet_add_* 函数接受工作表、数据和可选选项。主要用途是更新一个现有的工作表对象

2. 根据已有数据,按需导出Excel

1.1 需求示例

在这里插入图片描述

假如我现在有一个这种查询表格需要导出,因为所有的数据都在表格中,所以不需要调用API也可以实现

1.2 具体实现

import { Workbook } from "exceljs";
import { saveAs } from "file-saver";try {this.loading = true;// 创建一个工作簿const workbook = new Workbook();// columns 需要生成的Excel列 { prop, label, width, sheetName | Detail }// sheetName 需要生成的 Sheet 页, 如果只生成一个 Sheet Excel 不用考虑这里const sheets = _.uniq(this.columns.map((t) => t.sheetName || "Detail"));for (let i = 0; i < sheets.length; i++) {const columns = this.columns.filter((t) => (t.sheetName || "Detail") === sheets[i]);// addWorksheet 添加一个 Sheet 页const worksheet = workbook.addWorksheet(sheets[i]);worksheet.columns = columns.map((t) => {// 需求处理const label = t.label ? t.label : this.propToLabel(t.prop);return {header: this.l(label), // Excel 第一行标题key: t.prop,width: label.length * 2, // Excel 列的宽度};});// this.list -> 当前 table 数据 this.list.forEach((t) => {const row = [];columns.forEach((x) => {row.push(t[x.prop] || "");});// 生成的 Excel Sheet 添加数据worksheet.addRow(row);});// 第一行 Header 行添加自定义样式worksheet.getRow(1).eachCell((cell, colNumber) => {cell.fill = {type: "pattern",pattern: "solid",fgColor: {argb: "cccccc",},bgColor: {argb: "#96C8FB",},};});}// 导出的文件名const code = this.exportTemple.code || new Date().getTime();workbook.xlsx.writeBuffer().then((buffer) => {// 调用 第三方库 下载刚生成好的ExcelsaveAs(new Blob([buffer], {type: "application/octet-stream",}),code + "." + "xlsx");this.loading = false;});
} catch (e) {console.error("clinet export error", e);
} finally {this.loading = false;
}

如果大数据的量导出建议还是后端来实现,前端要用 websocket 做优化,避免长时间 loading 带来不好的用户体验

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

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

相关文章

C++(QT)画图行车

通过鼠标在窗口上点击形成多个点的连线&#xff0c;绘制一辆汽车沿着绘制的连线轨迹前进。要求连线点数大于20.可以通过清除按钮清除已经绘制的连线&#xff0c;并可以重新绘制一条轨迹连线。当车辆行驶到轨迹终点时&#xff0c;自动停止。&#xff08;汽车实在可用方块代替&am…

MIT6.S081实验环境搭建

MIT6.S081 lab 环境搭建 本文参考了MIT的官方指南和知乎文章环境搭建 step1 首先需要一个ubuntu20.04的系统&#xff0c;我使用的是vscode的WSL2连接的ubuntu20.04&#xff0c;使用virtual box建一个ubuntu20.04的虚拟机应该也可以。 可以用 lsb_release -a 查看一下自己ub…

NoSQL之Redis配置与优化(一)

关系数据库与非关系型数据库 &#xff1a; ●关系型数据库&#xff1a; 关系型数据库是一个结构化的数据库&#xff0c;创建在关系模型&#xff08;二维表格模型&#xff09;基础上&#xff0c;一般面向于记录。 SQL 语句&#xff08;标准数据查询语言&#xff09;就是一种基于…

网站edge -- 油猴 -> IDM

一、百度网盘限速 未解决 软件&#xff1a;IDM 安装路径&#xff1a; 1.1如果&#xff1a;edge 出问题打不开其他网站&#xff0c; 解决方法&#xff1a; 以管理员的身份&#xff0c;右击载这个软件&#xff0c;就好了 1.2使用这个软件 应该是右击这个软件 以管理员的身…

Redis Redis的数据结构 - 通用命令 - String类型命令 - Hash类型命令

目录 Redis的数据结构&#xff1a; Redis命令&#xff1a; 通用命令&#xff1a;&#xff08;通用指令是部分数据类型的&#xff0c;都可以使用的指令&#xff09; KEYS查询命令&#xff1a; DEL删除命令&#xff1a; EXISTS判断命令&#xff1a; EXPIPE有效期设置命令&…

蓝桥杯打卡Day2

文章目录 糖果分享游戏玛雅人的密码 一、糖果分享游戏IO链接 本题思路:本题是一道模拟题&#xff0c;最终需要每个人得到相同的糖果&#xff0c;那么此时我们开辟一个数组用来保存每个人分一半的结果&#xff0c;然后每个人都需要从左边拿到对方糖果&#xff0c;那么左边就是…

分享一下在微信上有哪些微信活动可以做

微信营销活动是吸引更多用户和提高品牌知名度的有效策略。下面是一些微信营销活动的做法&#xff1a; 抽奖活动&#xff1a;通过设置奖品和参与条件&#xff0c;吸引用户参与抽奖活动。例如&#xff0c;可以设置关注公众号、转发活动页面等条件&#xff0c;吸引更多用户参与抽奖…

Yalmip使用教程(6)-将约束条件写成矩阵形式

博客中所有内容均来源于自己学习过程中积累的经验以及对yalmip官方文档的翻译&#xff1a;https://yalmip.github.io/tutorials/ 这篇博客将详细介绍如何借助yalmip工具箱将约束条件写成矩阵形式。 1.相关函数介绍 1.1 depends和getvariables函数 depends和getvariables函数都…

两个路由器如何连接设置的方法攻略

一、前言 随着智能家居时代来临&#xff0c;家里的网络部署需求开始复杂起来。往往一个路由器已经不能满足需求或者不利于拓展。两个路由器连接最常见的情况是家中已有一个路由器&#xff0c;并且已经通过这个路由器来正常上网。现在是因某些原因想在不改变已经在用的路由器的设…

【huggingface】数据集及模型下载并保存至本地

目录 数据集ChnSentiCorppeoples_daily_ner 模型bert-base-chinesehfl/rbt3t5-baseopus-mt-zh-enChinese_Chat_T5_Base 环境&#xff1a;没有代理&#xff0c;无法访问部分国外网络 数据集 正常情况下通过load_dataset加载数据集&#xff1b;save_to_disk保存至本地&#xff1b…

jupyter notebook 魔术命令介绍和简单使用

在Jupyter notebook中&#xff0c;“魔法命令”是特殊的命令&#xff0c;不是Python语言的一部分&#xff0c;但可以使您的生活更轻松。这些命令前面有%符号。 魔法命令很有用&#xff0c;可以直接嵌入到python代码中&#xff0c;并解决常见问题&#xff0c;例如列出当前目录中…

2020年下半年系统架构设计师上午真题及答案解析

1.按照我国著作权法的权利保护期&#xff0c;&#xff08; &#xff09;受到永久保护。 A.发表权 B.修改权 C.复制权 D.发行权 2.假设某计算机的字长为32位&#xff0c;该计算机文件管理系统磁盘空间管理采用位示图记录磁盘的使用情况&#xff0c;若磁盘的容量为3…

视频集中存储/云存储/磁盘阵列EasyCVR平台分组批量绑定/取消设备功能详解

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台视频能力丰富灵活&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。视频汇聚融合管理平台EasyCVR既具备传…

springmvc5.x-mvc实现原理及源码实现

上文&#xff1a;spring5.x-声明式事务原理及源码实现 系列文章&#xff1a; spring5.x-声明式事务原理及源码实现 spring5.x-AOP实现原理及源码分析 spring5.x-监听器原理及源码实现 spring5.x-解决循环依赖分析 spring5.x-IOC模块源码学习 spring5.x介绍及搭配spring源码阅读…

GoT:用大语言模型解决复杂的问题

GoT&#xff1a;用大语言模型解决复杂的问题 摘要介绍背景和符号表示语言模型和上下文学习Input-Output&#xff08;IO&#xff09;Chain of thought&#xff08;CoT&#xff09;Multiple CoTTree of thoughts&#xff08;ToT&#xff09; GoT框架推理过程思维变换聚合变换&…

群晖 DS918通过CISCO SG250 LACP 链路聚合效果不佳的问题解决

问题表现 使用的是CISCO交换机打开LACP 链路聚合&#xff0c;且DS918上完成接口聚合并配置为平衡TCP模式后。通过IPREF测速整体网络性能仅能达到300Mbps左右。 问题解决 检查CISCO交换机LAG配置中&#xff0c;针对DS918的接口组是否正确配置了流量配置。请按照如下图所示&#…

无涯教程-Android Intent Standard Extra Data函数

下表列出了各种重要的Android Intent Standard Extra Data。您可以查看Android官方文档以获取额外数据的完整列表- Sr.NoExtra Data & Description1 EXTRA_ALARM_COUNT 用作AlarmManager intents(意图)中的int Extra字段,以告诉正在调用的应用程序intents(意图)释放了多少…

使用Android原生制作毛玻璃效果图片

毛玻璃效果&#xff0c;也被称为模糊效果&#xff0c;是许多现代应用中流行的一种视觉效果。在 Android 中&#xff0c;我们可以通过多种方式实现该效果。本文将探讨如何使用 Android 原生的 Bitmap 类和 RenderScript 来实现毛玻璃效果。 1. 准备工作 首先&#xff0c;你需要…

NIFI关于Parameter Contexts的使用

说明 nifi版本&#xff1a;1.23.2&#xff08;docker镜像&#xff09; 作用 Parameter Contexts&#xff08;参数上下文&#xff09;&#xff1a;参数上下文由 NiFi 实例全局定义/访问。访问策略可以应用于参数上下文&#xff0c;以确定哪些用户可以创建它们。创建后&#x…

什么是RTC

参考&#xff1a; https://zhuanlan.zhihu.com/p/377100294 RTC&#xff08;Real time communication&#xff09;实时通信&#xff0c;是实时音视频的一个简称&#xff0c;我们常说的RTC技术一般指的是WebRTC技术&#xff0c;已经被 W3C 和 IETF 发布为正式标准。由于几乎所…