需求

  • 实现在系统里批量导入数据,通过上传一个excel文件,前端将文件处理为json数据发送给后端。(最好与后端定义好上传的文件模板,方便处理数据)

实现

代码

  • 实现导入Excel方法
function importsExcel(file: any) {
//使用promise导入
return new Promise((resolve, reject) => {
// 获取上传的文件对象
const { files } = file.target; //获取里面的所有文件
// 通过FileReader对象读取文件
const fileReader = new FileReader(); fileReader.onload = (event) => {
//异步操作 excel文件加载完成以后触发
try {
const { result } = event.target as any;
// 以二进制流方式读取得到整份excel表格对象
const workbook = XLSX.read(result, { type: "binary" });
let data: any = []; // 存储获取到的数据
// 遍历每张工作表进行读取
for (const sheet in workbook.Sheets) {
if (workbook.Sheets.hasOwnProperty(sheet)) {
data = data.concat(
// 将工作表转换为json数据
XLSX.utils.sheet_to_json(workbook.Sheets[sheet])
);
}
}
resolve(data); //导出数据
} catch (e) {
// 这里可以抛出文件类型错误不正确的相关提示
reject("失败"); //导出失败
}
};
// 以二进制方式打开文件
fileReader.readAsBinaryString(files[0]);
});
}
  • 页面功能调用
    <input
type="file"
accept=".xls,.xlsx"
onChange={(e) => {
importsExcel(e).then(
function (data) {
console.log(data);
},
function (data) {
console.log(data);
}
);
}}
/>

使用xlsx实现Excel导入的更多相关文章

  1. poi excel导入导出

    pom <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artif ...

  2. Excel导入工具类兼容xls和xlsx

    package com.bj58.finance.platform.operation.provider.util; import org.apache.log4j.Logger; import or ...

  3. Excel 导入到Datatable 中,再使用常规方法写入数据库

    首先呢?要看你的电脑的office版本,我的是office 2013 .为了使用oledb程序,需要安装一个引擎.名字为AccessDatabaseEngine.exe.这里不过多介绍了哦.它的数据库 ...

  4. nopi excel 导入

    #region 从Excel导入 /// <summary> /// 读取excel ,默认第一行为标头 /// </summary> /// <param name=& ...

  5. NPOI操作Excel导入DataTable中

    using NPOI.HSSF.UserModel; using NPOI.SS.UserModel; using System.Data; using System.IO; using NPOI.X ...

  6. Excel导入导出(篇二)

    <body> <h3>一.Excel导入</h3> <h5>.模板下载:<a href="UpFiles/TemplateFiles/学 ...

  7. C#实现Excel模板导出和从Excel导入数据

    午休时间写了一个Demo关于Excel导入导出的简单练习 1.窗体 2.引用office命名空间 添加引用-程序集-扩展-Microsoft.Office.Interop.Excel 3.封装的Exc ...

  8. 使用XSSFWork创建的xlsx后缀Excel文件无法打开

    使用XSSFWork创建的xlsx后缀Excel文件无法打开 标签: POIExcelmicrosoftxlsx 2015-04-21 10:49 1170人阅读 评论(2) 收藏 举报 分类: Ja ...

  9. Excel导入导出帮助类

    /// <summary>    /// Excel导入导出帮助类    /// 记得引入 NPOI    /// 下载地址   http://npoi.codeplex.com/rele ...

随机推荐

  1. Django(76)isort工具对import导入进行排序

    前言 我们在开发项目时经常会进行导包有import *格式的,还有from * import *格式的,最后就会显示的很乱,那么有没有什么工具能对导包进行一键排序呢?答案是有的,使用isort工具 i ...

  2. C/C++转义字符表

    转义字符 意义 ASCII码值(十进制) \a 响铃(BEL) 007 \b 退格(BS) ,将当前位置移到前一列 008 \f 换页(FF),将当前位置移到下页开头 012 \n 换行(LF) ,将 ...

  3. FESTUNG 模型介绍 — 2. 对流问题隐式求解

    FESTUNG 模型介绍 - 2. 对流问题隐式求解 1. 控制方程 对流问题的控制方程为 \[\partial_t C + \partial_x u^1 C + \partial_y u^2 C = ...

  4. 最短剩余时间优先法则SRTN

  5. 学习java的第十天

    一.今日收获 1.java完全学习手册第二章2.9程序流程控制中的选择结构与顺序结构的例题 2.观看哔哩哔哩上的教学视频 二.今日问题 1.例题的问题不大,需要注意大小写,新的语句记忆不牢 2.哔哩哔 ...

  6. nextcloud搭建私有云盘

    一.基础环境准备 1.安装一台centos7的linux服务器. # 系统初始化 # 如果时区不对,请修改时区 #mv /etc/localtime /etc/localtime_bak #ln -s ...

  7. Flink(四)【IDEA执行查看Web UI】

    1.导入依赖 <!-- flink Web UI --> <dependency> <groupId>org.apache.flink</groupId> ...

  8. 大数据学习day35----flume01-------1 agent(关于agent的一些问题),2 event,3 有关agent和event的一些问题,4 transaction(事务控制机制),5 flume安装 6.Flume入门案例

    具体见文档,以下只是简单笔记(内容不全) 1.agent Flume中最核心的角色是agent,flume采集系统就是由一个个agent连接起来所形成的一个或简单或复杂的数据传输通道.对于每一个Age ...

  9. 零基础学习java------day10------带包编译,权限修饰符,内部类,调式,junitTest

    0.  带包编译 解决使用notepad++编写的java类中如果有package的解决方案,如下代码 package com._51doit.test; class HelloWorld{ publ ...

  10. 文件读写以及NMEA码中GPS信息的提取

    首先先了解下什么是NMEA码,这里有很好的解释,就不直接搬运了 http://www.gpsbaby.com/wz/nmea.html 首先要找到包含GPS信息的文本行,即字符串GPGGA所在行 $G ...