前端实现导入Excel进行数据展示、导出

需求

一个 excel 文档 需要对文档里面的数据进行筛选拆分重组 由于数据量巨大 后端又抽不出来手  于是使用纯前端解决方案

解决思路

前端导入excel 

把 excel 的数据解析为 json 格式 

对数据进行相应操作后

重新导出为新 excel

虽笨但有效

第一步 导入excel

该方案需引入以下第三方库

xlsx.core.min.js

原生写法

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><span>excel导入:</span><input type="file" onchange="importf(this)" /><p id="excelContent"></p>
</body><script src="./js/jQuery3.7.1min.js"></script>
<script src="https://cdn.bootcss.com/xlsx/0.11.5/xlsx.core.min.js"></script>
<script src="./js/dist_jquery.table2excel.min.js"></script>
<script>// 导入let data = null // 总数据var wb;//读取var rABS = false;//开始导入function importf(obj) {if (!obj.files) {return;}var f = obj.files[0];var reader = new FileReader();reader.onload = function (e) {var data = e.target.result;if (rABS) {wb = XLSX.read(btoa(fixdata(data)), {//手动转化type: 'base64'});} else {wb = XLSX.read(data, {type: 'binary'});}/*** wb.SheetNames[0]是获取Sheets中第一个Sheet的名字* wb.Sheets[Sheet名]获取第一个Sheet的数据*/var excelJson = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);console.log(excelJson);document.getElementById("excelContent").innerHTML = JSON.stringify(excelJson);};if (rABS) {reader.readAsArrayBuffer(f);} else {reader.readAsBinaryString(f);}}//文件流转BinaryStringfunction fixdata(data) {var o = "",l = 0,w = 10240;for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w +w)));o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));return o;}</script></html>

Vue写法

须在代码中稍作修改

<input type="file" @change="importf" />data() {wb: null,rABS: false,
}methods:{// 导入excelimportf(event) {const file = event.target.files[0];const reader = new FileReader();reader.onload = (e) => {const data = e.target.result;if (this.rABS) {this.wb = XLSX.read(btoa(fixdata(data)), {type: 'base64'});} else {this.wb = XLSX.read(data, {type: 'binary'});}const excelJson = XLSX.utils.sheet_to_json(this.wb.Sheets[this.wb.SheetNames[0]]);this.getTableData(excelJson)};if (this.rABS) {reader.readAsArrayBuffer(file);} else {reader.readAsBinaryString(file);}},//文件流转BinaryStringfixdata(data) {let o = "",l = 0,w = 10240;for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));return o;}
}

实现结果

第二步 修改导入进去的excel数据

显而易见 以原生写法为例  变量 excelJson 即为excel中导入出的数据

这里把数据赋值给了excelJson 变量

在此 可以对 excelJson 中的数据进行修改

!!

需要注意的是  如果仅仅是把 excel 中的数据导入到页面中进行展示

那看到这里就结束了   但如果需要导出  且是纯前端实现导出  看第三步

第三步 导出

纯前端实现表格导出  可以参考我以前的文章

前端JS导出Excel表格 可筛选列 table2excel_js-table2excel-CSDN博客

如果完全看完以上文章 我想你会明白要怎么做了

首先 excel 导入进来的数据处理后 需要渲染为 table 原生表格 形式  然后按照以上文章中的table2excel 该第三方库进行导出

非常easy 

导出需要依赖 jquery  建议 vue 项目为后端导出 或寻找适合vue的table第三方库进行导出

原生项目的话 引入 jquery 库后  点击导出时 可以生成一个隐藏的 table dom 进行渲染  导出后对该 dom 进行删除 即可实现无感导出

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

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

相关文章

Promise魔鬼面试题

文章目录 题目解析难点分析分析输出step1step2step3step4step5step6 参考/致谢&#xff1a;渡一袁老师 题目 Promise.resolve().then(() > {console.log(0);return Promise.resolve(4);}).then((res) > {console.log(res);});Promise.resolve().then(() > {console.l…

spark sql 与scala混合开发实现数据入mongodb

目录 概述资源解决问题效果环境配置相关包关键代码 测试测试结果 概述 在此提供 spark sql 与scala混合开发实现数据入mongodb 相关思路 将部分重复性功能进行通用化(使用SQL与Scala混合开发模式)。 相关组件 hadoop 3.3.6 spark 3.4.2 kyuubi 1.8.0 基于上术组件开发 资源 …

uniapp video 层级覆盖

层级覆盖 cover-view组件 我这里做了个判断 监听全屏时隐藏按钮 根据项目需求自行更改

2024.5.6 关于 SpringCloud 的基本认知

目录 引言 微服务框架所包含的技术栈 微服务架构演变 单体架构 分布式架构 微服务架构 微服务技术对比 认识 SpringCloud SpringBoot 版本兼容关系 服务拆分和远程调用 服务拆分注意事项 远程调用 引言 微服务是一种框架风格&#xff0c;按照业务板块来划分应用代码…

微信小程序(Taro)获取经纬度并转化为具体城市

1、获取经纬度 申请权限&#xff0c;想要使用微信小程序获取经纬度的方法是要申请该方面的权限。 获取经纬度的方法有很多选择其中一个使用就好。 我使用的是Taro.getFuzzyLocation(&#xff09; 在app.config.js中需要添加设置 requiredPrivateInfos: ["getFuzzyLocat…

群晖上部署农场管理系统farmOS

什么是 farmOS &#xff1f; farmOS 是一个基于 Web 的应用程序&#xff0c;用于农场管理、规划和记录保存。它由志愿者社区开发&#xff0c;旨在为农民、开发人员和研究人员提供一个标准平台。 需要注意的是&#xff0c;群晖内核版本太低会遇到下面的错误&#xff0c;这个 AH0…

高实时、高可靠的微内核操作系统——鸿道Intewell

近年来&#xff0c;我国不断推进工业转型升级&#xff0c;力求实现从传统工业大国向现代工业强国的跨越。想要在新一轮科技革命中“超车”&#xff0c;需要从多个维度进行深度布局和全面发力。 ——科技创新是核心驱动力 积极推动工业结构的优化和升级&#xff0c;通过发展新…

vue脚手架和vite创建的项目的环境配置

开发环境文件 .env.development NODE_ENV"development" # // 开发接口域名 本地测试就用这个 # vue脚手架创建的 VUE_APP_MODE"开发环境" VUE_APP_API_URL http://19527 # vite创建的 # VITE_MODE"开发环境" # VITE_BASE_URL http://1920:9527…

python环比分析日常消费数据掌握月支出增减情况

欢迎关注我👆,收藏下次不迷路┗|`O′|┛ 嗷~~ 目录 一.前言 二.代码 三.分析 一.前言 月支出是指个人或家庭在一个月内用于消费、投资、储蓄等方面的资金流出总额。它是反映个人或家庭经济状况的重要指标之一,可以帮助人们更好地规划和管理自己的财务。 月支出的构成…

LLMs之GPT4ALL:GPT4ALL的简介、安装和使用方法、案例应用之详细攻略

LLMs之GPT4ALL&#xff1a;GPT4ALL的简介、安装和使用方法、案例应用之详细攻略 目录 GPT4ALL的简介 0、新功能 1、特点 2、功能 3、技术报告 GPT4ALL的安装和使用方法 1、安装 2、使用方法 GPT4ALL的案例应用 LLMs之LLaMA3&#xff1a;基于GPT4ALL框架对LLaMA-3实现…

【DeepLearning.AI】吴恩达系列课程——使用ChatGPT API构建系统(持续更新中——)

目录 前言一、Language Models, the Chat Format and Tokens&#xff08;LLM&#xff0c;交互形式&#xff09;1-1、加载api-key1-2、使用辅助函数&#xff08;即指令调整LLM&#xff09;1-2、使用辅助函数&#xff08;聊天格式&#xff09;1-3、辅助函数修改&#xff08;输出字…

文件各种上传,离不开的表单 [html5]

作为程序员的我们&#xff0c;经常会要用到文件的上传和下载功能。到了需要用的时候&#xff0c;各种查资料。有木有..有木有...。为了方便下次使用&#xff0c;这里来做个总结和备忘。 利用表单实现文件上传 最原始、最简单、最粗暴的文件上传。 前端代码&#xff1a; //方…

WPF 图片显示某一部分区域

效果图&#xff1a; 代码&#xff1a; <Image Width"32"HorizontalAlignment"Right"Height"32"Source"../../Resources/Images/BLUEWOLF.jpg"><Image.Clip><PathGeometry><PathFigure StartPoint"32,32&quo…

苍穹外卖项目---------收获以及改进(5-6天)

①HttpClient 核心作用&#xff1a;在java编码中发送http请求 第一步&#xff1a;引入依赖 第二步&#xff1a;使用封装一个工具类 package com.sky.utils;import com.alibaba.fastjson.JSONObject; import org.apache.http.NameValuePair; import org.apache.http.client.co…

【北京迅为】《iTOP-3588开发板源码编译手册》-第4章 Android12/Linux设备树简介

RK3588是一款低功耗、高性能的处理器&#xff0c;适用于基于arm的PC和Edge计算设备、个人移动互联网设备等数字多媒体应用&#xff0c;RK3588支持8K视频编解码&#xff0c;内置GPU可以完全兼容OpenGLES 1.1、2.0和3.2。RK3588引入了新一代完全基于硬件的最大4800万像素ISP&…

微信小程序03: 获取不限制的小程序二维码

全文目录,一步到位 1.前言简介1.1 专栏传送门1.1.1 上文小总结1.1.2 上文传送门 2. 获取不限制二维码操作2.1 准备工作2.1.1 请先复制00篇的统一封装代码2.1.2 修改配置文件中的参数 2.2 具体代码使用与注释如下2.2.1 业务代码如下2.2.2 代码解释(一)[无需复制]2.2.3 创建Base6…

html--瀑布效果

<!doctype html> <html> <head> <meta charset"utf-8"> <title>瀑布效果</title><style> body {background: #222;color: white;overflow:hidden; }#container {box-shadow: inset 0 1px 0 #444, 0 -1px 0 #000;height: 1…

Sakura编辑器

1、sakura左右上下分屏不让联动设置

Java中Maven的依赖管理

依赖介绍 是指当前项目运行所需要的jar包&#xff0c;一个项目中可以引入多个依赖 配置 在pom.xml中编写<dependencies>标签 在<dependencies>中使用<dependency>引入标签 定义坐标的groupId、rtifactId、version 点击刷新按钮、引入新坐标 例如引入下…

从零开始:搭建PXE远程批量安装服务器

在大规模服务器部署时&#xff0c;面对成百上千台服务器&#xff0c;通过手动插入光盘或者USE驱动器来安装操作系统无比繁琐&#xff0c;让大量工程师在现场挨个安装系统也不切实际&#xff0c;PXE的出现使得网络远程批量自动安装和配置操作系统成为现实。 什么是PXE&#xff1…