React实现导出excel内容

最新推荐文章于 2024-05-06 18:04:38 发布

西柚要努力

最新推荐文章于 2024-05-06 18:04:38 发布

阅读量5.2k

点赞数

分类专栏：心得文章标签： reactjs

本文链接：https://blog.csdn.net/qq_43676606/article/details/103893842

版权

这篇博客介绍了如何在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