当前位置: 首页 > news >正文

react框架对Excel文件进行上传和导出

1.首先需要安装xlsx第三方的库库


引入插件
 

npm install xlsx

在react引入

import * as XLSX from 'xlsx';


1,首先设置jsx部分的  以下代码包含有导入excel文件和导出excel文件,读着可以根据需要,自己选择想要实现的功能 

代码如下(示例):

// import React from 'react';
import React, { useState } from 'react';
import * as XLSX from 'xlsx';
import './App.css';
function App() {// 导入本机的Excel文件到网页HTML文件当中// 读取文件function readWorkbookFromLocalFile() {var file = document.getElementById('inputfilename').files[0];if (file) {var reader = new FileReader();reader.onload = function (e) {var data = e.target.result;var workbook = XLSX.read(data, { //XLSX.read()方法会返回一个workbook 对象type: 'binary'});readWorkbook(workbook);};reader.readAsBinaryString(file);} else {alert('请先选择文件');}}// 分别创建json和csv的空列表var json = null;// var csv = '';const [csv, setCsv] = useState("")// 读取Excel并且显示在桌面上function readWorkbook(workbook) {// 工作表名称集合var sheetNames = workbook.SheetNames;// 这里我们只读取第一张sheet的内容var worksheet = workbook.Sheets[sheetNames[0]];//这里便可以得到csv格式setCsv(XLSX.utils.sheet_to_csv(worksheet))// csv = XLSX.utils.sheet_to_csv(worksheet);//使用csv2table()函数将其转换为简单的HTML表格,csv2table()函数定义在下一个代码块中document.getElementById('result').innerHTML = csv2table(csv);json = XLSX.utils.sheet_to_json(worksheet);// 成功转换为json格式后,可能表格中的中文属性名并不是后台所需要的字段名// 那么,就可以使用如下方法,遍历这个json对象,然后对其中的字段名进行修改for (var i in json) {for (var key in json[i]) {if (key === '年龄') {json[i]['age'] = json[i][key] //修改属性名为“age”delete json[i]['年龄'] //删除“年龄”} else if (key === '性别') {if (json[i][key] === '男') {json[i][key] = '1';} else {json[i][key] = '0';}json[i]['sex'] = json[i][key] //修改属性名为“sex”delete json[i]['性别'] //删除“性别”} else if (key === '姓名') {json[i]['username'] = json[i][key] //修改属性名为“username”delete json[i]['姓名'] //删除“姓名”} else if (key === '工号') {json[i]['workId'] = json[i][key] + ''; //修改属性名为“workId”delete json[i]['工号'] //删除“工号”}}}}// 将Excel文件转为html页面中可以显示出来的格式function csv2table(csv) {var html = '<table class="test1">';var rows = csv.split('\n');rows.pop(); // 最后一行没用的rows.forEach(function (row, idx) {var columns = row.split(',');columns.unshift(idx + 1); // 添加行索引if (idx === 0) { // 添加列索引html += '<tr>';for (var i = 0; i < columns.length; i++) {html += '<th>' + (i === 0 ? '' : String.fromCharCode(65 + i - 1)) + '</th>';}html += '</tr>';}html += '<tr>';columns.forEach(function (column) {html += '<td>' + column + '</td>';});html += '</tr>';});html += '</table>';return html;}// 导出Excel文件到本机中// csv转sheet对象function csv2sheet(csv) {var sheet = {}; // 将要生成的sheetcsv = csv.split('\n');csv.forEach(function (row, i) {row = row.split(',');if (i === 0) sheet['!ref'] = 'A1:' + String.fromCharCode(65 + row.length - 1) + (csv.length - 1);row.forEach(function (col, j) {sheet[String.fromCharCode(65 + j) + (i + 1)] = { v: col };});});return sheet;}// 将一个sheet转成最终的excel文件的blob对象,然后利用URL.createObjectURL下载function sheet2blob(sheet, sheetName) {sheetName = sheetName || 'sheet1';var workbook = {SheetNames: [sheetName],Sheets: {}};workbook.Sheets[sheetName] = sheet;// 生成excel的配置项var wopts = {bookType: 'xlsx', // 要生成的文件类型bookSST: false, // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性type: 'binary'};var wbout = XLSX.write(workbook, wopts);var blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });// 字符串转ArrayBufferfunction s2ab(s) {var buf = new ArrayBuffer(s.length);var view = new Uint8Array(buf);for (var i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;return buf;}return blob;}/**
* 通用的打开下载对话框方法,没有测试过具体兼容性
* @param url 下载地址,也可以是一个blob对象,必选
* @param saveName 保存文件名,可选
*/function openDownloadDialog(url, saveName) {if (typeof url == 'object' && url instanceof Blob) {url = URL.createObjectURL(url); // 创建blob地址}var aLink = document.createElement('a');aLink.href = url;aLink.download = saveName || ''; // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效var event;if (window.MouseEvent) event = new MouseEvent('click');else {event = document.createEvent('MouseEvents');event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);}aLink.dispatchEvent(event);}// 传入csv,执行后就会弹出下载框function exportExcel() {var sheet = csv2sheet(csv);var blob = sheet2blob(sheet);openDownloadDialog(blob, '导出.xlsx');}function sum() {// var para=document.getElementById("").valuealert("求和结果568")}return (<div className="App" style={{ backgroundColor: "white" }}>{/*<选择文件的input*/}<div className="choose" style={{ display: "inline", width: "100px", height: "50px", fontSize: "40px" }} ><input type="file" id="inputfilename" /></div>{/*读取文件的按钮*/}<div style={{ display: "inline", width: "100px", height: "50px", fontSize: "40px" }}  ><button onClick={readWorkbookFromLocalFile}>读取Excel表格</button></div>{/* 导出Excel文件 */}<div style={{ display: "inline", width: "100px", height: "50px", fontSize: "40px" }}  ><button onClick={exportExcel}>导出Excel表格</button></div><button onClick={sum}>求和功能</button>{/* 显示所读取excel的区域*/}<div id="result"style={{ width: "1080px", height: "600px", fontSize: "40px", overflow: "scroll", backgroundColor: "lightblue" }}></div></div>);
}
export default App;


第二步,在第一步中导入文件到电脑上面时,在这部分的代码中,添加了

设置样式。
 

function csv2table(csv) {var html = '<table class="test1">';var rows = csv.split('\n');rows.pop(); // 最后一行没用的rows.forEach(function (row, idx) {var columns = row.split(',');columns.unshift(idx + 1); // 添加行索引if (idx === 0) { // 添加列索引html += '<tr>';for (var i = 0; i < columns.length; i++) {html += '<th>' + (i === 0 ? '' : String.fromCharCode(65 + i - 1)) + '</th>';}html += '</tr>';}html += '<tr>';columns.forEach(function (column) {html += '<td>' + column + '</td>';});html += '</tr>';});html += '</table>';return html;}

 

 

相关文章:

react框架对Excel文件进行上传和导出

1.首先需要安装xlsx第三方的库库 引入插件 npm install xlsx在react引入 import * as XLSX from xlsx;1&#xff0c;首先设置jsx部分的 以下代码包含有导入excel文件和导出excel文件&#xff0c;读着可以根据需要&#xff0c;自己选择想要实现的功能 代码如下&#xff0…...

【前端】-【前端文件操作与文件上传】-【前端接受后端传输文件指南】

目录 前端文件操作与文件上传前端接受后端传输文件指南 前端文件操作与文件上传 一、前端文件上传有两种思路&#xff1a; 二进制blob传输&#xff1a;典型案例是formData传输&#xff0c;相当于用formData搭载二进制的blob传给后端base64传输&#xff1a;转为base64传输&…...

【IC前端虚拟项目】验证环境env与base_teat思路与编写

【IC前端虚拟项目】数据搬运指令处理模块前端实现虚拟项目说明-CSDN博客 上一篇里解决了最难搞的axi_ram_model,接下来呢就会简单又常规一些了,比如这一篇要说的env和base_test的搭建。在这里我用了gen_uvm_tb脚本: 【前端验证】验证自动化脚本的最后一块拼图补全——gen_t…...

使用Remix部署智能合约到币安链(Remix的操作介绍 币安链合约的部署) 点赞收藏哦

大家好&#xff0c;我是程序员大猩猩呀。 据我所知&#xff0c;很多人进入币圈之后&#xff0c;想要通过炒币一夜暴富&#xff01;另一部分人呢他们希望自己能创建一个项目&#xff0c;然后发行自己的数字货币然后暴富。 不管是什么方式吧&#xff0c;只要不违法&#xff0c;…...

为什么Redis6.0引入了多线程

Redis 6.0引入了多线程&#xff0c;主要原因有以下几点&#xff1a; 提高网络I/O的吞吐量&#xff1a;多线程可以更有效地处理大量的并发连接和请求&#xff0c;特别是在多核心服务器上。通过使用多线程来处理读写网络套接字&#xff0c;Redis能够更充分地利用系统资源&#x…...

速盾:高防ip和高防cdn有什么相同点?

高防IP&#xff08;Dedicated IP&#xff09;和高防CDN&#xff08;Content Delivery Network&#xff09;都是用来保护网站免受各种网络攻击的技术手段&#xff0c;它们在一定程度上具有相同的作用和效果。下面将详细介绍它们的相同点。 首先&#xff0c;高防IP和高防CDN都能…...

设计模式之拦截过滤器模式

想象一下&#xff0c;在你的Java应用里&#xff0c;每个请求就像一场冒险旅程&#xff0c;途中需要经过层层安检和特殊处理。这时候&#xff0c;拦截过滤器模式就化身为你最可靠的特工团队&#xff0c;悄无声息地为每一个请求保驾护航&#xff0c;确保它们安全、高效地到达目的…...

【联通支付注册/登录安全分析报告】

联通支付注册/登录安全分析报告 前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨…...

c++ - 在循环中使用迭代器删除 unordered_set 中的元素

标签 c unordered-set 请考虑以下代码: Class MyClass 为自定义类:class MyClass { public:MyClass(int v) : Val(v) {}int Val; };然后下面的代码将在调用 it T.erase(it); 之后在循环中导致 Debug Assertion Failed: unordered_set<MyClass*> T; unordered_set<…...

深入了解哈希映射(HashMap)

一、哈希映射&#xff08;HashMap&#xff09;简介 在计算机科学中&#xff0c;哈希映射&#xff08;HashMap&#xff09;是一种基于键值对&#xff08;Key-Value pair&#xff09;存储数据的数据结构&#xff0c;它提供了高效的数据查找、插入和删除操作。哈希映射的核心思想…...

Public Key Retrieval is not allowed

Public Key Retrieval is not allowed 最近使用 JDBC 连接 MySQL 频繁出现如下报错&#xff1a; java.sql.SQLNonTransientConnectionException: Public Key Retrieval is not allowe 这段代码是一个 Java 异常错误信息&#xff0c;其中包含了以下关键信息&#xff1a; 错误类…...

iphone进入恢复模式怎么退出?分享2种退出办法!

iPhone手机莫名其妙的进入到了恢复模式&#xff0c;或者是某些原因需要手机进入恢复模式&#xff0c;但是之后我们不知道如何退出恢复模式怎么办&#xff1f; 通常iPhone进入恢复模式的常见原因主要是软件问题、系统升级失败、误操作问题等导致。那iphone进入恢复模式怎么退出&…...

Leetcode 107:二叉树的层次遍历II

给你二叉树的根节点 root &#xff0c;返回其节点值 自底向上的层序遍历 。 &#xff08;即按从叶子节点所在层到根节点所在的层&#xff0c;逐层从左向右遍历&#xff09;。 思路&#xff1a;翻转title102的结果即可。 //层次遍历二叉树public static List<List<Integ…...

LNMP一键安装包

LNMP一键安装包是什么? LNMP一键安装包是一个用Linux Shell编写的可以为CentOS/RHEL/Fedora/Debian/Ubuntu/Raspbian/Deepin/Alibaba/Amazon/Mint/Oracle/Rocky/Alma/Kali/UOS/银河麒麟/openEuler/Anolis OS Linux VPS或独立主机安装LNMP(Nginx/MySQL/PHP)、LNMPA(Nginx/MySQ…...

[机器学习-05] Scikit-Learn机器学习工具包进阶指南:协方差估计和交叉分解功能实战【2024最新】

&#x1f3a9; 欢迎来到技术探索的奇幻世界&#x1f468;‍&#x1f4bb; &#x1f4dc; 个人主页&#xff1a;一伦明悦-CSDN博客 ✍&#x1f3fb; 作者简介&#xff1a; C软件开发、Python机器学习爱好者 &#x1f5e3;️ 互动与支持&#xff1a;&#x1f4ac;评论 &…...

多线程的情况下 AopContext.currentProxy()切面代理失效问题

多线程的情况下 AopContext.currentProxy()切面代理失效问题 在多线程环境下&#xff0c;AopContext.currentProxy() 可能会遇到问题&#xff0c;特别是在某些情况下&#xff0c;它无法正确地获取到当前线程的代理对象。这通常发生在以下几种情况&#xff1a; 线程不是由Spri…...

https://是怎么实现的?

默认的网站建设好后都是http访问模式&#xff0c;这种模式对于纯内容类型的网站来说&#xff0c;没有什么问题&#xff0c;但如果受到中间网络劫持会让网站轻易的跳转钓鱼网站&#xff0c;为避免这种情况下发生&#xff0c;所以传统的网站改为https协议&#xff0c;这种协议自己…...

Linux无root配置Node,安装nvm

1. 安装NVM&#xff1a; curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash # 或者&#xff0c;如果你使用wget wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash 对于bash用户&#xff0c;可以运行&…...

蛋糕店做配送小程序的作用是什么

蛋糕烘焙除了生日需要&#xff0c;对喜吃之人来说往往复购率较高&#xff0c;除线下实体店经营外&#xff0c;更多的商家选择线上多种方式获客转化、持续提高生意营收&#xff0c;而除了进驻第三方平台外&#xff0c;构建品牌私域自营店铺也同样重要。 运用【雨科】平台搭建蛋…...

重写muduo之TcpServer

目录 1、Callbacks.h 2、TcpServer.h 3、TcpServer.cc 1、Callbacks.h 回调操作 #pragma once#include <memory> #include <functional>class Buffer; class TcpConnection;using TcpConnectionPtrstd::shared_ptr<TcpConnection>; using ConnectionCall…...

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

家政维修平台实战20:权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)

【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

Linux离线(zip方式)安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...