react+ant中table导出excel

1.开发环境 react
2.电脑系统 windows11专业版
3.在开发的过程中,可能会需要导出excel文件,下面我来分享一下方法,希望对你有所帮助,让我们一起努力走向巅峰。
4.xlsx:

引用呼声最高的是 xlsx,又叫 SheetJS,也是下载量最高和 star最多的库。试用了一下很强大,但是!默认不支持改变样式,想要支持改变样式,需要使用它的收费版本。

ExcelJS:

ExcelJS 周下载量 450k,github star 9k,并且拥有中文文档,对国内开发者很友好。虽然文档是以README 的形式,可读性不太好,但重在内容,常用的功能基本都有覆盖

5.安装:


npm install exceljs

npm install file-saver

6.核心代码:

// 导入
import * as ExcelJs from 'exceljs';
import {saveAs} from "file-saver";
import {Workbook} from "exceljs";
import {ColumnsType} from "antd/lib/table/interface";
//方法
const generateHeaders = (columns) => {
        return columns?.map(col => {
            const obj = {
                // 显示的 name
                header: col.title,
                // 用于数据匹配的 key
                key: col.dataIndex,
                // 列宽
                width: col.width / 5 || 20
            };
            return obj;
        })
    }

    const saveWorkbook = (workbook, fileName) => {
        // 导出文件
        workbook.xlsx.writeBuffer().then((data => {
            const blob = new Blob([data], {type: ''});
            saveAs(blob, fileName);
        }))
    }

    const tableExport = (TableData,ColumnsData) => {
        // 创建工作簿
        const workbook = new ExcelJs.Workbook();
        // 添加sheet
        const worksheet = workbook.addWorksheet('demo sheet');
        // 设置 sheet 的默认行高
        worksheet.properties.defaultRowHeight = 20;
        // 设置列
        worksheet.columns = generateHeaders(ColumnsData);
        // 添加行
        worksheet.addRows(TableData);
        // 导出excel
        saveWorkbook(workbook, 'simple-demo.xlsx');
    }
// div 代码:
<Row gutter={24} justify={"end"}>
  <Button type="primary" onClick={()=>{
      tableExport(api_tableData,api_columns)
  }}>导出</Button>
</Row>
<Row gutter={24} style={{marginTop:10}}>
  <Table columns={api_columns} 
         dataSource={api_tableData} 
         style={{width: "100%"}} 
         pagination={false}
         scroll={{x: 'max-content'}}/>
</Row>
// 注意:tableExport 方法第一个参数是:table;第二个参数是:columns

6-1效果图如下:
image.png
7.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。

某,从来都不相信所谓的天赋和天才,只有不断努力的平凡人。只要内心是坚定的,就会有所收获;失败会让我们...

48 声望
1 粉丝
0 条评论
推荐阅读
vue+element upload组件上传多次调用接口(解决方案)
1.开发环境 vue+element2.电脑系统 windows11专业版3.在使用element的过程中,遇到upload组件上传多次调用接口,下面我来分享一下解决方法:

灰太狼的情与殇阅读 206

你知道前端水印功能是怎么实现的吗?
前一段时间由于项目需要实现水印功能,于是去了解了相关的内容后,基于 Vue 的实现了一个 v-watermark 指令完成了对应的功能,其实整体内容并不复杂!

熊的猫14阅读 1.7k

封面图
2022 你还不会微前端吗 (上) — 从巨石应用到微应用
微前端系列分为 上/下 两篇,本文为 上篇 主要还是了解微前端的由来、概念、作用等,以及基于已有的微前端框架进行实践,并了解微前端的核心功能所在,而在下篇 2022 你还不会微前端吗 (下) — 揭秘微前端核心原理...

熊的猫14阅读 1.6k

封面图
大前端必备书籍
为了方便前端开发者系统学习前端知识,搜集了前端系列电子书,帮助开发者系统梳理知识体系,深入理解前端技术。更多书单请关注Github[链接] 。CSS权威指南(第四版)上册百度云CSS权威指南(第四版)下册百度云CSS揭...

码出世界13阅读 1.4k

【WebRTC 跨端通信】React + React Native 双端视频聊天、屏幕共享
之前介绍过 WebRTC,简单来说它是一个点对点的实时通讯技术,主要基于浏览器来实现音视频通信。这项技术目前已经被广泛应用于实时视频通话,多人会议等场景。

杨成功13阅读 1.6k评论 1

封面图
2022 你还不会微前端吗 (下) — 揭秘微前端核心原理
在上篇 2022 你还不会微前端吗 (上) — 从巨石应用到微应用 中已经了解了微前端的由来和基本使用,也提到了一些相关的原理,本篇文章为下篇主要从原理层面进行解析,然后再自己实现一个包含核心部分的微前端框架。

熊的猫8阅读 1.1k

封面图
如何使用 React 和 Monaco Editor 实现 Web 版 VSCode?
本项目是 React 基于 Monaco Editor 实现的 Web VSCode Demo,它的主要功能是允许在浏览器中编写 TypeScript/JavaScript 并直接运行,除此之外,它还包含如下功能:

破晓L6阅读 1.7k

某,从来都不相信所谓的天赋和天才,只有不断努力的平凡人。只要内心是坚定的,就会有所收获;失败会让我们...

48 声望
1 粉丝
宣传栏