React实现导出excel内容

这篇博客介绍了如何在React应用中利用xlsx库实现Excel内容的导出。首先通过npm安装xlsx工具,然后在代码中调用相关方法,最终实现从React应用中选择文件并成功导出Excel的效果。
摘要由CSDN通过智能技术生成

首先这在控制台输入 npm install xlsx安装xls工具。
此时可以看到:
“dependencies”:{
“xlsx”: “^0.15.4”
}
接着

import XLSX from 'xlsx';
import {message} from 'antd';
   <input type="file" accept='.xlsx, .xls'  onChange={this.importExcel} />

调用方法:

  importExcel=(file)=>{
    // 获取上传的文件对象
    const { files } = file.target;
// 通过FileReader对象读取文件
    const fileReader = new FileReader();
    fileReader.onload = event => {
      try {
        const { result } = event.target;
        // 以二进制流方式读取得到整份excel表格对象
        const workbook = XLSX.read(result, { type: 'binary' });
        // 存储获取到的数据
        let data = [];
        // 遍历每张工作表进行读取(这里默认只读取第一张表)
        for (const sheet in workbook.Sheets) {
          // esline-disable-next-line
          if (workbook.Sheets.hasOwnProp
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值