本地读取Excel文件并进行数据压缩传递到服务器

        在项目开发过程中,读取excel文件,可能存在几百或几百万条数据内容,那么对于大型文件来说,我们应该如何思考对于大型文件的读取操作以及性能的注意事项。

 类库:Papa Parse - Powerful CSV Parser for JavaScript

第一步:安装

npm install papaparse

第二步:内容的引入

import Papa from 'papaparse';
import { useState } from "react";export default function App() {const [results,setResults] = useState([]); //保留解析后的数据const handleFile = (e) => {const file = e.target.files[0];Papa.parse(file,{header:true, //指定第一行为标题行skipEmptyLines:true, //跳过空行complete:(parsedResult) => {const data = parsedResult.data;console.log(data) // 在控制台打印解析后的数据}})};return (<div><h1>本地读取Excel文件并进行数据压缩传递到服务器</h1><input type="file" onChange={handleFile} accept='.csv' /></div>)
}

当我们上传的数据为百万条数据的时候,数据量是非常的庞大的,那么如果将数据传输到服务器上,将会对http的请求资源产生极大的浪费。所以我们考虑使用第三方类库pako进行数据的压缩。

对于pako,可以查看以下文章进行一个了解:https://github.com/nodeca/pako

pako是什么以及它的的使用_如何使用pako库-CSDN博客文章浏览阅读62次。ws推送的gzip压缩能减少大量的传输数据,减少传输数据消耗,但是需要在收到数据之后解压。解压就可以用到pako了。_如何使用pako库https://blog.csdn.net/mantou_riji/article/details/135001065

第三步:pako安装

npm install pako

第四步:在组件中进行pako引入且对数据进行gzip的压缩

import pako from "pako";

引入之后,将我们获取到的数据进行gzip的压缩

// gzip压缩
const gzip = pako.gzip(JSON.stringify(data),{to:"string"});
console.log(JSON.stringify(data).length,gzip.length); //打印的则是压缩后的数据信息
//原先的长度为41万,压缩后的长度为4万

且发送到后端(以下是改事件的全部代码,gzip的压缩数据也在其内)

 const handleFile = (e) => {const file = e.target.files[0];Papa.parse(file,{header:true, //指定第一行为标题行skipEmptyLines:true, //跳过空行complete:async (parsedResult) => {const data = parsedResult.data;console.log(data) // 在控制台打印解析后的数据// gzip压缩const gzip = pako.gzip(JSON.stringify(data),{to:"string"});console.log(JSON.stringify(data).length,gzip.length); //打印的则是压缩后的数据信息const response = await fetch("http://localhost:3000",{method:"POST",body:gzip,headers:{"Content-Type":"application/octet-stream", //数据流的方式进行上传处理}});console.log(response)}})};

第五步:后端,后端也需要下载pako进行解压缩处理

const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const pako = require("pako");const app = express();// 使用 cors 中间件处理跨域请求
app.use(cors());// 使用 bodyParser 中间件解析请求体
app.use(bodyParser.raw({ type: "application/octet-stream", limit: "100mb" }));// 处理 POST 请求
app.post("/", (req, res) => {// 获取压缩后的数据const compressedData = req.body;// 解压缩数据const uncompressedData = pako.ungzip(compressedData, { to: "string" });// 将解压缩后的数据解析为 JSON 对象const jsonData = JSON.parse(uncompressedData);// 打印压缩前数据长度,解压缩后数据长度和 JSON 对象长度console.log(compressedData.length,uncompressedData.length,jsonData.length);// 构造响应消息const msg =compressedData.length +" " +uncompressedData.length +" " +jsonData.length;// 发送响应res.status(200).send(msg);
});// 启动服务器,监听端口 3000
app.listen(3000, () => {console.log("Server started on port 3000");
});

执行以上操作后,我们运行项目选择文件,后端返回三条数据

已压缩的长度   未压缩的长度   最终记录的条数

前端也已经返回了response的一个相应数据

第六步:对打印的response进行进一步的处理 

console.log(response)
const result = {success:response.ok.toString(),status:response.status,message:response.statusText,
};
setResults(result)

第七步:展示到页面上

<h2>结果显示</h2>
<ul>{results && Object.keys(results).map((key) => {<li key={key}>{key}:{results[key]}</li>})}
</ul>

第八步:添加一个点击按钮事件切换背景颜色

const toggleBodyBackground = () => {if(document.body.style.background === "red"){document.body.style.background = "white";}else{document.body.style.background = "red"}
}<button onClick={toggleBodyBackground}>change body background</button>

 当我进行大文件读取的时候会造成主线程的阻塞,那么后续我们可以进行功能的强化,在强化过程中,我们可以去考虑,是不是可以对现有的数据进行拆分,如果是一百多万条数据的时候,我们可以将一百多万条数据进行五万条,五万条的切片处理,然后不断的在后端进行压缩后数据的请求处理,最终可以在服务器端进行对数据的操作,减轻服务器的压力。

第九步:是否可以减轻服务器的压力,以下操作可以进行一个测试

使用console.time('test')开始时间设置console.timeEnd("test")结束时间设置

const handleFile = (e) => {console.time('test') //开始时间const file = e.target.files[0];Papa.parse(file,{...............};setResults(result)console.timeEnd("test"); //结束时间}})
};

当前的测试时间为18秒左右,耗费时常比较久,那么随后我们会对其进行功能优化处理。

此内容已结束,希望对您有所帮助。 

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

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

相关文章

html中,元素width和height的单位px、cm、mm、in、pc、pt、ch、em、rem、vh、vw、vmin、vmax的含义

在 HTML 中&#xff0c;元素的 width 和 height 属性可以使用多种单位来表示尺寸。下面是这些单位的含义&#xff1a; 像素&#xff08;px&#xff09;&#xff1a;像素是最常见的单位&#xff0c;表示固定的像素值。例如&#xff0c;width: 200px; 表示元素的宽度为 200 像素。…

springboot116基于java的教学辅助平台

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的基于java的教学辅助平台 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考&#xff0c; 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图看 第五章 第四…

要编译 Qt 的 .pro 工程,可以使用 qmake 和 make 工具

要编译 Qt 的 .pro 工程&#xff0c;可以使用 qmake 和 make 工具。下面是一个基本的 Makefile 示例&#xff0c;用于编译 Qt 的 .pro 工程&#xff1a; # 指定编译器 CXX g # 指定 qmake 命令的路径 QMAKE qmake# 指定目标文件名和可执行文件名 TARGET myapp# 定义源代码文…

R语言入门——多变量移除

目录 0、引言1、单变量删除的例子2、多变量移除2.1 ls的用法 2.2多变量删除 0、引言 有很多小伙伴在运行程序的时候就想在每次循环结束时提出一些占用内存大且无用的数据或变量&#xff0c;或者仅仅保留一些数据&#xff0c;但是rm的语法在删除多变量时候需要和ls()函数联用。…

Java中的深拷贝与浅拷贝

深拷贝与浅拷贝 深拷贝和浅拷贝是编程中常用的两种对象复制方式&#xff0c;它们在复制对象时处理对象内部引用的方式上有所不同。 浅拷贝 浅拷贝&#xff08;Shallow Copy&#xff09;只复制对象的顶层结构&#xff0c;而不复制对象内部的引用对象。换句话说&#xff0c;浅…

基于光口的以太网 udp 回环实验

文章目录 前言一、系统框架整体设计二、系统工程及 IP 创建三、UDP回环模块修改说明四、接口讲解五、顶层模块设计六、下载验证前言 本章实验我们通过网络调试助手发送数据给 FPGA,FPGA通过光口接收数据并将数据使用 UDP 协议发送给电脑。 提示:任何文章不要过度深思!万事万…

从白子画到东方青苍,你选择谁来守护你的修仙之旅?

从白子画到东方青苍,你选择谁来守护你的修仙之旅? 在繁花似锦的修仙世界中&#xff0c;每一位追梦者都渴望有那么一位守护者&#xff0c;与你共患难&#xff0c;共成长。热血与浪漫交织的《花千骨》与《苍兰诀》&#xff0c;给我们带来了两位风华绝代的守护者&#xff1a;白子…

磁盘初始化会丢失文件吗?答案揭晓!

“由于我的电脑出现了一些问题&#xff0c;我就将磁盘初始化了&#xff0c;但是里面还有很重要的文件&#xff0c;磁盘初始化了文件会丢失吗&#xff1f;有什么方法可以恢复丢失的文件呢&#xff1f;” 当我们谈论磁盘初始化&#xff0c;通常是指对硬盘或固态驱动器&#xff08…

解决执行npm(或pnpm)时报:证书过期 certificate has expired问题

项目执行 pnpm install 初始化时报 reason: certificate has expired 错误。 解决方案 1、取消ssl验证&#xff1a;npm config set strict-ssl false这个方法一般就可以解决了。2、更换npm镜像源&#xff1a;npm config set registry http://registry.cnpmjs.org npm config …

第13节-简历中的开放性问题

(点击即可收听) 不少公司的开放式题目每年不会有太大的变化&#xff0c;所以在答题前可先去相关求职论坛看看这些公司往年的问题&#xff0c;分析和思考自己应当怎么回答 开放式问题回答技巧 开放式问题主要考察的是求职者的求职动机、解决问题的能力、创造力等软实力&#xff…

initdb: command not found【PostgreSQL】

如果您遇到 “initdb: command not found” 错误&#xff0c;说明 initdb 命令未找到&#xff0c;该命令用于初始化新的 PostgreSQL 数据库群集。这通常是因为 PostgreSQL 相关的工具未正确安装或者安装路径不在系统的 PATH 变量中。 以下是解决这个问题的一些建议&#xff1a…

linux|操作系统|centos7物理机安装网卡驱动8188gu(内核升级,firmware固件,USB设备管理,module管理)

前言&#xff1a; 目前服务器领域centos7基本是主流的操作系统&#xff0c;而linux相对于Windows来说&#xff0c;软硬件方面的支持是差很多的&#xff0c;在硬件方面来说&#xff0c;以一个免驱的网卡为例&#xff0c;window xp可能不会自动识别到&#xff0c;但Windows10基本…

wikijs在启动项目时遇到的问题

问题 使用PostgreSQL安装wikijs过程中&#xff0c;启动项目运行node server时&#xff0c;会报错如下&#xff1a; error: Database Initialization Error: create table "migrations" ("id" serial primary key, "name" varchar(255), "b…

JUC并发编程与源码分析学习笔记(二)

二十九、多线程锁之线程锁知识概述 说说Java“锁”事 从轻松的乐观锁和悲观锁开讲 通过8种情况演示锁运行案例&#xff0c;看看我们到底锁的是什么 公平锁和非公平锁 可重入锁&#xff08;又名递归锁&#xff09; 死锁及排查 写锁&#xff08;独占锁&#xff09;/读锁&a…

Java中创建List接口、ArrayList类和LinkedList类的常用方法(一)

List接口 要了解List接口&#xff0c;就不得不说起Java的集合框架。 &#xff08;该图来自菜鸟教程&#xff09; Collection接口和Map接口 Java 集合框架主要包括两种类型的容器&#xff0c;集合Collection和图Map。 Collection接口代表了单列集合&#xff0c;它包含了一组…

【知识---OpenCV库中的图像滤波算法作用】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言常见的图像滤波算法包括均值滤波、高斯滤波、中值滤波、双边滤波等&#xff0c;每种算法在不同的应用场景中都有其优劣之处。总结 前言 OpenCV&#xff08;Ope…

微信公众号怎么申请超过2个

一般可以申请多少个公众号&#xff1f;目前公众号申请数量的规定是从2018年底开始实施的&#xff0c;至今没有变化。规定如下&#xff1a;1、个人可以申请1个个人主体的公众号&#xff1b;2、企业&#xff08;有限公司&#xff09;可以申请2个公众号&#xff1b;3、个体户可以申…

MyBatis 的XML实现方法(JAVA)

数据库表的结构如下&#xff1a; DROP DATABASE IF EXISTS test; CREATE DATABASE test DEFAULT CHARACTER SET utf8mb4; -- 使⽤数据数据 USE test; -- 创建表[⽤⼾表] DROP TABLE IF EXISTS userinfo; CREATE TABLE userinfo ( id INT ( 11 ) NOT NULL AUTO_INCREMENT, user…

如何本地搭建Splunk Enterprise数据平台并实现任意浏览器公网访问

文章目录 前言1. 搭建Splunk Enterprise2. windows 安装 cpolar3. 创建Splunk Enterprise公网访问地址4. 远程访问Splunk Enterprise服务5. 固定远程地址 前言 本文主要介绍如何简单几步&#xff0c;结合cpolar内网穿透工具实现随时随地在任意浏览器&#xff0c;远程访问在本地…

MacM1Pro Parallels19.1.0 CentOS7.9 Install PostgrepSQL

相关阅读 MacM1Pro安装 Parallels Desktop 19.1.0 https://blog.csdn.net/qq_41594280/article/details/135420241 MacM1Pro Parallels安装Parallels Tools https://blog.csdn.net/qq_41594280/article/details/135398780 MacM1Pro Parallels安装CentOS7.9 https://blog.csdn.n…