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

简介: 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 = {}; // 将要生成的sheet
    csv = 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" });
    // 字符串转ArrayBuffer
    function 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("").value
    alert("求和结果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;
  }
相关文章
|
7天前
|
文字识别 BI
【图片型PDF】批量识别扫描件PDF指定区域局部位置内容,将识别内容导出Excel表格或批量改名文件,基于阿里云OCR对图片型PDF识别改名案例实现
在医疗和政务等领域,图片型PDF文件(如病历、报告、公文扫描件)的处理需求广泛。通过OCR技术识别这些文件中的文字信息,提取关键内容并保存为表格,极大提高了信息管理和利用效率。本文介绍一款工具——咕嘎批量OCR系统,帮助用户快速处理图片型PDF文件,支持区域识别、内容提取、导出表格及批量改名等功能。下载工具后,按步骤选择处理模式、进行区域采样、批量处理文件,几分钟内即可高效完成数百个文件的处理。
49 8
|
1月前
|
前端开发 安全 UED
React 文件预览组件:File Preview
在现代Web应用中,文件上传和预览功能至关重要。本文基于React库,详细介绍如何构建文件预览组件,涵盖文件选择器、图片预览、文件大小限制及多种文件类型支持。通过实际代码示例,解析常见问题如跨域请求、文件路径处理和状态管理,并提供解决方案。帮助开发者提升用户体验,减少误操作。
48 2
|
2月前
|
人工智能 自然语言处理 Java
FastExcel:开源的 JAVA 解析 Excel 工具,集成 AI 通过自然语言处理 Excel 文件,完全兼容 EasyExcel
FastExcel 是一款基于 Java 的高性能 Excel 处理工具,专注于优化大规模数据处理,提供简洁易用的 API 和流式操作能力,支持从 EasyExcel 无缝迁移。
234 9
FastExcel:开源的 JAVA 解析 Excel 工具,集成 AI 通过自然语言处理 Excel 文件,完全兼容 EasyExcel
|
2月前
|
Python
批量将不同的工作簿合并到同一个Excel文件
本文介绍如何使用Python的`pandas`库批量合并不同工作簿至同一Excel文件。通过模拟生成三个班级的成绩数据,分别保存为Excel文件,再将这些文件合并成一个包含所有班级成绩的总成绩单。步骤包括安装必要库、生成数据、保存与合并工作簿。
71 6
|
2月前
|
Python
按条件将Excel文件拆分到不同的工作表
使用Python的pandas库,可以轻松将Excel文件按条件拆分为多个工作表。本文通过一个具体示例,展示了如何根据学生班级将成绩数据拆分到不同的工作表中,并生成一个包含总成绩表和各班级成绩表的Excel文件。代码简洁明了,适合初学者学习和应用。
64 6
|
2月前
|
Python
按条件将Excel文件拆分到不同的工作表
使用Python的pandas库,可以轻松将Excel文件按条件拆分到不同的工作表中。本文通过一个示例代码展示了如何生成一个包含总成绩表和三个班级表的Excel文件。代码首先创建了一个包含学生姓名、班级和各科成绩的数据框,然后按班级分组,将每个班级的数据分别写入不同的工作表。最后,生成的Excel文件将包含四个工作表,分别为总成绩表和三个班级的成绩表。
52 6
按条件将Excel文件拆分到不同的工作表
|
3月前
|
前端开发
实现Excel文件和其他文件导出为压缩包,并导入
实现Excel文件和其他文件导出为压缩包,并导入
50 1
|
2月前
|
存储 Java easyexcel
招行面试:100万级别数据的Excel,如何秒级导入到数据库?
本文由40岁老架构师尼恩撰写,分享了应对招商银行Java后端面试绝命12题的经验。文章详细介绍了如何通过系统化准备,在面试中展示强大的技术实力。针对百万级数据的Excel导入难题,尼恩推荐使用阿里巴巴开源的EasyExcel框架,并结合高性能分片读取、Disruptor队列缓冲和高并发批量写入的架构方案,实现高效的数据处理。此外,文章还提供了完整的代码示例和配置说明,帮助读者快速掌握相关技能。建议读者参考《尼恩Java面试宝典PDF》进行系统化刷题,提升面试竞争力。关注公众号【技术自由圈】可获取更多技术资源和指导。
|
2月前
|
数据采集 数据可视化 数据挖掘
利用Python自动化处理Excel数据:从基础到进阶####
本文旨在为读者提供一个全面的指南,通过Python编程语言实现Excel数据的自动化处理。无论你是初学者还是有经验的开发者,本文都将帮助你掌握Pandas和openpyxl这两个强大的库,从而提升数据处理的效率和准确性。我们将从环境设置开始,逐步深入到数据读取、清洗、分析和可视化等各个环节,最终实现一个实际的自动化项目案例。 ####
305 10
|
4月前
|
数据处理 Python
Python实用记录(十):获取excel数据并通过列表的形式保存为txt文档、xlsx文档、csv文档
这篇文章介绍了如何使用Python读取Excel文件中的数据,处理后将其保存为txt、xlsx和csv格式的文件。
268 3
Python实用记录(十):获取excel数据并通过列表的形式保存为txt文档、xlsx文档、csv文档