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;}

 

 

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

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

相关文章

动态代理(JDK、Cglib、Bytebuddy)

文章目录 动态代理JDK动态代理代理对象的生成动态代理执行流程简化代码静态代理 Cglib动态代理代理类的生成动态代理执行流程 bytebuddy常用api生成一个类对实例方法进行插桩实例方法进行插桩的扩展三种增强方式插入新方法方法委托动态修改入参对构造方法进行插桩对静态方法进行…

【北京迅为】《iTOP-3588从零搭建ubuntu环境手册》-第3章 Ubuntu20.04系统设置

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

【论文阅读笔记】jTrans(ISSTA 22)

个人博客地址 [ISSTA 22] jTrans&#xff08;个人阅读笔记&#xff09; 论文&#xff1a;《jTrans: Jump-Aware Transformer for Binary Code Similarity》 仓库&#xff1a;https://github.com/vul337/jTrans 提出的问题 二进制代码相似性检测&#xff08;BCSD&#xff0…

2024数维杯数学建模B题完整论文讲解(含每一问python代码+结果+可视化图)

大家好呀&#xff0c;从发布赛题一直到现在&#xff0c;总算完成了2024数维杯数学建模挑战赛生物质和煤共热解问题的研究完整的成品论文。 本论文可以保证原创&#xff0c;保证高质量。绝不是随便引用一大堆模型和代码复制粘贴进来完全没有应用糊弄人的垃圾半成品论文。 B题论…

跟我学C++中级篇——封装对象的实践

一、对象封装 在面向对象编程中&#xff0c;首要的事情就是如何进行对象的封装。说的直白一些&#xff0c;就是如何设计类或者是结构体。许多开发者看过不少的书&#xff0c;也学过很多的设计方法&#xff0c;更看过很多别人的代码。那么如何指导自己进行对象的封装呢&#xf…

数学学习笔记1——二次函数中的数形结合

二次函数中的数形结合 一、解一元二次不等式 基本方法&#xff1a;配方。 x 2 − 4 x 3 < 0 → ( x − 2 ) 2 < 1 → ∣ x − 2 ∣ < 1 → 1 < x < 3 x^2-4x3<0\to(x-2)^2<1\to\lvert x-2\rvert<1\to1<x<3 x2−4x3<0→(x−2)2<1→∣x−…

VBA_MF系列技术资料1-605

MF系列VBA技术资料1-605 为了让广大学员在VBA编程中有切实可行的思路及有效的提高自己的编程技巧&#xff0c;我参考大量的资料&#xff0c;并结合自己的经验总结了这份MF系列VBA技术综合资料&#xff0c;而且开放源码&#xff08;MF04除外&#xff09;&#xff0c;其中MF01-0…

具备教学意义的实操(用队列实现栈)

225. 用队列实现栈 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/implement-stack-using-queues/description/ 实现逻辑 一个是先进先出&#xff08;队列&#xff09;&#xff0c;一个是后进先出&#xff08;栈&#xff09; 这里用两个队列导入一下数据…

JS实现递归功能

// 递归函数示例&#xff1a;计算阶乘 function factorial(n) {if (n 0) {return 1;} else {return n * factorial(n - 1);} }// 调用递归函数计算阶乘 const result factorial(5); console.log(result); // 输出 120 在上面的示例中&#xff0c;我们定义了一个递归函数fact…

项目管理 | 如何做好项目管理?

大部分人在做项目管理时会遇到以下问题&#xff1a; 团队沟通不畅&#xff0c;对于项目的各个环节和配合方无法掌控项目的任务分配和跟踪困难&#xff0c;项目进度不透明项目上线进度慢&#xff0c;没有威信难以服众 那项目管理怎么做&#xff1f;这篇就结合简道云团队的经验…

爬虫学习:XPath提取网页数据

目录 一、安装XPath 二、XPath的基础语法 1.选取节点 三、使用XPath匹配数据 1.浏览器审查元素 2.具体实例 四、总结 一、安装XPath 控制台输入指令&#xff1a;pip install lxml 二、XPath的基础语法 XPath是一种在XML文档中查找信息的语言&#xff0c;可以使用它在HTM…

MySQL 数据库中 Insert 语句的锁机制

在数据库系统中&#xff0c;Insert 语句是常用的操作之一&#xff0c;用于向数据库表中插入新的数据记录。然而&#xff0c;当多个会话&#xff08;或者线程&#xff09;同时对同一张表执行 Insert 操作时&#xff0c;可能会引发一些并发控制的问题&#xff0c;特别是涉及到锁的…

数据结构----二叉树

博主主页: 码农派大星. 关注博主带你了解更多数据结构知识 1. 树型结构 1.1 概念 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做树是因为它看起来像一棵倒挂的树&#xff0c;也就是说它是根朝上…

【软考】模拟考卷错题本2024-05-11

1 设计模式- 适配器模式 基本上上述的图解已经涵盖了绝大多数主流的设计模式和其特点。理解记忆下即可&#xff0c;这里对下午的考题也有帮助的。 2 计算机组成原理 cpu 访问速度 这个真的是憨憨咯~看到内存就选内存&#xff0c;题目都没审好。这里的速度比cpu内部的要比外部的…

c++ STL 之栈—— stack 详解

vector 是 stl 的一个关联容器,名叫“栈”&#xff0c;何为“栈”&#xff1f;其实就是一个数组&#xff0c;但有了数组何必还需栈&#xff0c;这是一个高深的问题。 一、简介 1. 定义 栈&#xff0c;是一个柔性数组&#xff08;可变长数组&#xff09;&#xff0c;可以变大变小…

巩固学习5

ls.sort(keylambda x:x[1], reverseTrue) ls.sort(): 这是 Python 中用于对列表进行排序的方法之一。与 sorted() 函数不同&#xff0c;sort() 方法会直接修改原始列表&#xff0c;而 sorted() 函数则返回一个新的已排序列表。 keylambda x: x[1]: 这部分是一个关键参数&#x…

ASE docker related research

ASE 2022 Understanding and Predicting Docker Build Duration: An Empirical Study of Containerized Workflow of OSS Projects 理解和预测 Docker 构建持续时间&#xff1a;OSS 项目容器化工作流程的实证研究 Docker 构建是容器化工作流程的关键组成部分&#xff0c;它…

Centos7安装图形化界面

前言&#xff1a;原文在我的博客网站中&#xff0c;持续更新数通、系统方面的知识&#xff0c;欢迎来访&#xff01; Centos7安装图形化界面https://myweb.myskillstree.cn/43.html 目录 一、安装GNOME桌面 二、开机自启动修改为命令行模式 三、卸载图形化界面 一、安装GN…

Oracle 误操作insert delete update 数据回滚

查询回滚数据 select * from tablename AS OF TIMESTAMP TO_TIMESTAMP(2023-12-29 10:29:00,yyyy-mm-dd hh24:mi:ss) where not exists (select 1 from tablename A where A.xh tablename.xh and A.TIME tablename.TIME); TO_TIMESTAMP(2023-12-29 10:29:00,yyyy-mm-dd h…

【C++】string类的使用③(修改器Modifiers || 非成员函数重载Non-member function overloads)

&#x1f525;个人主页&#xff1a; Forcible Bug Maker &#x1f525;专栏&#xff1a; STL || C 目录 前言&#x1f525;修改器&#xff08;Modifiers&#xff09;**operator**appendpush_back和pop_backassigninserterasereplaceswap &#x1f525;非成员函数重载&#xff…