js导入excel＆导出excel

Excel导入

html代码

<button style={{ color: '#1890ff', fontSize: '14px', cursor: 'pointer' }} onClick={() => { upFile(); }} >

　　导入

</button>

<input id="upFile" type="file" style={{ display: 'none' }} accept=".xlsx, .xls" onChange={upChange} />

js代码

import XLSX from 'xlsx';

const upFile = () => {

    const upSdaFile: any = document.getElementById('upFile');

    upSdaFile.click();

};

const upChange = (e) => {

    const file = e.target.files[0]; // 获取第一个文件

    const reader = new FileReader();

    reader.readAsBinaryString(file); // 读取这个文件

    reader.onload = function (event) {

      try {

        const { result }: any = event.target;

        const xlsxData = XLSX.read(result, { type: 'binary' }); // 读取xlsx

        let col: any = null;

        // @ts-ignore

        for (const n in xlsxData.Sheets) { // eslint-disable-line

          // 这里是多张表格 所以写一个循环

          col = XLSX.utils.sheet_to_json(xlsxData.Sheets[n], { header: 1, defval: '', blankbook: true }); // 解析为数组

        }

        console.log('col', col);

      } catch (err) {

        console.log('err', err);

      }

    };

  };

注意不要引用 0.18.几的xlsx，和其他文件冲突报错找不到，要安装 "xlsx": "0.17.0"

Excel导出

html代码

<Button onClick={() => ecportExcel()} > 导出 </Button>

js代码

const jsonData = [

  { name: '张三', age: 12, gender: '男' },

  { name: '李四', age: 14, gender: '男' },

  { name: '王五', age: 15, gender: '女' },

]

// 前端实现导出

const ecportExcel = (jsonData: any) => {

  // 列标题，逗号隔开，每一个逗号就是隔开一个单元格

  let str = `序号,名称,年龄,性别\n`;

  const tableData: any = []

  jsonData.forEach((el: any, index: number) => {

    tableData.push({

      index: index + 1,

      name: el?.name || '',

      age: el?.age || '',

      gender: el?.gender || '',

    })

  });

  // 增加\t为了不让表格显示科学计数法或者其他格式

  for (let i = 0; i < tableData.length; i++) { // eslint-disable-line

    for (const key in tableData[i]) { // eslint-disable-line

      str += `${`${tableData[i][key]}\t`},`;

    }

    str += '\n';

  }

  // encodeURIComponent解决中文乱码

  const uri = `data:text/xlsx;charset=utf-8,\ufeff${encodeURIComponent(str)}`;

  // 通过创建a标签实现

  const link = document.createElement("a");

  link.href = uri;

  // 对下载的文件命名

  link.download = "企业承诺汇总.xlsx";

  link.click();

}

欢迎各位大大关注！！！

js导入excel&导出excel的更多相关文章

如何使用JavaScript导入和导出Excel文件
本文由葡萄城技术团队于原创并首发转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. JavaScript是一个涵盖多种框架.直译式.可以轻松自定义客户端的脚本 ...
如何使用JavaScript实现前端导入和导出excel文件
一.SpreadJS 简介 SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件,以“高速低耗.纯前端.零依赖”为产品特色,可嵌入任何操作系统,同时满足 .NE ...
[转]Java中导入、导出Excel
原文地址:http://blog.csdn.net/jerehedu/article/details/45195359 一.介绍当前B/S模式已成为应用开发的主流,而在企业办公系统中,常常有客户这样 ...
分享我基于NPOI+ExcelReport实现的导入与导出EXCEL类库：ExcelUtility （续3篇-导出时动态生成多Sheet EXCEL）
ExcelUtility 类库经过我(梦在旅途)近期不断的优化与新增功能,现已基本趋向稳定,功能上也基本可以满足绝大部份的EXCEL导出需求,该类库已在我们公司大型ERP系统全面使用,效果不错,今天应 ...
分享我基于NPOI+ExcelReport实现的导入与导出EXCEL类库：ExcelUtility （续2篇-模板导出综合示例）
自ExcelUtility类推出以来,经过项目中的实际使用与不断完善,现在又做了许多的优化并增加了许多的功能,本篇不再讲述原理,直接贴出示例代码以及相关的模板.结果图,以便大家快速掌握,另外这些示例说 ...
分享我基于NPOI+ExcelReport实现的导入与导出EXCEL类库：ExcelUtility （续篇）
上周六我发表的文章<分享我基于NPOI+ExcelReport实现的导入与导出EXCEL类库:ExcelUtility>受到了大家的热烈支持与推荐,再此表示感谢,该ExcelUtility ...
Java的导入与导出Excel
使用Jakarta POI导入.导出Excel Jakarta POI 是一套用于访问微软格式文档的Java API.Jakarta POI有很多组件组成,其中有用于操作Excel格式文件的HSSF和 ...
Java中导入、导出Excel
原文:Java中导入.导出Excel 一.介绍当前B/S模式已成为应用开发的主流,而在企业办公系统中,常常有客户这样子要求:你要把我们的报表直接用Excel打开(电信系统.银行系统).或者是:我们已 ...
Java中使用poi导入、导出Excel
一.介绍当前B/S模式已成为应用开发的主流,而在企业办公系统中,常常有客户这样子要求:你要把我们的报表直接用Excel打开(电信系统.银行系统).或者是:我们已经习惯用Excel打印.这样在我们实际 ...
js实现一键导出Excel
演示地址:https://xibushijie.github.io/static/ExportToExcel.html <!DOCTYPE html> <html lang=&quo ...

随机推荐

spring mvc DispatcherServlet详解之前传---FrameworkServlet
做项目时碰到Controller不能使用aop进行拦截,从网上搜索得知:使用spring mvc 启动了两个context:applicationContext 和WebapplicationCont ...
office快速制作简历
毕业的一年是由学校向社会转变的一年,面临着人生的一个重大转折--找工作.在如今信息爆炸的时代,纵使力拔山兮气盖世也难免会被遗落芳草之中而不得一展宏图.对未来的憧憬,对美好生活的向往,或多或少你需要一份 ...
pyqt5界面与逻辑分离--信号槽的装饰器实现方式
本文展示了 pyqt5 信号槽的装饰器实现方式(借鉴自 eirc6) 一个简单的例子.实现功能:两个数相加,显示结果.如图两个文件,第一个是界面文件 ui_calc.py # ui_calc.py ...
java读取各类型的文件
java读取各类型的文件用到的几个包 bcmail-jdk14-132.jar/bcprov-jdk14-132.jar/checkstyle-all-4.2.jar/FontBox-0.1.0-d ...
EMVTag系列8《IC卡公钥证书》
Ø 9F46 IC卡公钥证书 L: NI -C(有条件):如果支持DDA 发卡行认证过的IC 卡公钥 Ø 9F47 IC卡公钥指数 F: b T: 9F47 L: 1 or 3 C:如 ...
【转】 Git 常用命令详解（二）----不错
原文网址:http://blog.csdn.net/ithomer/article/details/7529022 Git 是一个很强大的分布式版本管理工具,它不但适用于管理大型开源软件的源代码(如: ...
Copy xml 文件
public static void copyFailFile(String bugID) throws Exception { File file = new File(".") ...
播放视频的框架Vitamio的使用问题
曾经用过这个牛逼的框架,后来又任意搞了下.发现播放不了视频了.搞了老半天才搞好,今天又随便整了下,发现又不行了.我勒个插! 如今最终又搞出来了,发现我总是把步骤搞错或少写了些东西总的步骤: 一:导入 ...
Django项目搭建和配置总结
安装和创建虚拟环境参考:linux系统下Python虚拟环境的安装和使用安装Django包先进入虚拟环境,在联网下执行: pip install django==1.8.7 1.8.7表示dja ...
解决 RabbitMQ 集群 Channel shutdown: connection error 错误（HAProxy 负载均衡）
相关文章:搭建 RabbitMQ Server 高可用集群具体错误信息: 2018-05-04 11:21:48.116 ERROR 60848 --- [.168.0.202:8001] o.s. ...

当前位置：网站首页>js导入excel＆导出excel

js导入excel＆导出excel

Excel导入

Excel导出

js导入excel&导出excel的更多相关文章

随机推荐

边栏推荐

猜你喜欢

随机推荐