react xlsx 数据转换excle 插件

描述 :将table选中数据转换成excle
或者将一定形式的数据手动转换为excle
安装 yarn add xlsx
使用

import * as XLSX from 'xlsx'// 导出选择const handleExport = useCallback(() => {console.log(selectedRows)setLoading(true)// 导出到excel//excle  整个表为一个数组  结构类似[[表头],[第一行数据],[....]]//表头名称 注意顺序要和 插入顺序名称保持一致const excelArr: any = [['推送记录ID','用户ID','open ID',]]//selectedRows为导出数据源selectedRows.forEach((item, index) => {const {planRecordId,userId,openId,} = item//在整个数组循环插入数据excelArr[index + 1] = [planRecordId,userId,openId,]})const wb = XLSX.utils.book_new()const ws = XLSX.utils.aoa_to_sheet(excelArr)XLSX.utils.book_append_sheet(wb, ws, 'Sheet1') // 将数据添加到工作薄XLSX.writeFile(wb, '推送详情.xlsx') // 导出Excel  setTimeout(() => {setSelectedRowKeys([])setLoading(false)}, 1000)}, [selectedRows])
//点击按钮导出 选中 return (<div><div>// button Table 是antd 的组件<Button size="small" type="primary" onClick={handleExport} loading={loading}>导出选中</Button></div><TablerowSelection={rowSelection} //table 选中的数据columns={PushColumns}rowKey={(record) => record.id}dataSource={dataSource}pagination={pagination}loading={tableLoading}onChange={handleTableChange}></Table></div>)

npm :https://www.npmjs.com/package/xlsx
github:https://github.com/SheetJS/sheetjs
use Api:https://docs.sheetjs.com/

react xlsx 数据转换excle 插件相关推荐

php 截图插件,react中有实现截图插件吗
react中有实现截图插件,如react截图组件"react-cropper",该组件可以实现图片裁剪功能,其使用方法是:首先安装"react-cropper" ...
React + Ts 自定义日历插件
React + Ts 自定义日历插件 ant-design 内置了日历组件,但是功能单一并不能够满足项目需求,因此自定义日历组件. 日历算法一个月最多跨6周,即6*7格式本月第一天 : fist ...
react 拖拽连接插件_一款精美的 react 后台管理系统
众里寻他千百度,蓦然回首,那人却在,灯火阑珊处.这么好的react开源项目,值得珍藏了! 项目依赖模块项目是用create-react-app创建的,依赖包如下: react(是一个用于构建用户界面 ...
echarts 按需引入模_【React】react项目引入echarts插件
参考npm文档:[echarts-for-react](echarts-for-react) 由于npm上已经有针对react项目出的echarts插件,所以在这里直接安装第一步:npm安装echa ...
react 引入轮播插件_简单实现 babelpluginimport 插件
前几个月写的一篇文章,在公众号补发一下,可能之前你们在其它平台已经看过了. 前言平时在使用 antd.element 等组件库的时候,都会使用到一个 Babel 插件:babel-plugin-im ...
react封装翻页插件
插件演示今天用react封装一个翻页插件,先给大家看一下效果: 翻页插件上面的文字是从后台获取的. 插件说明这个插件有五部分组成:首页.上一页.中间显示数字.下一页.尾页.具体的功能是:如果当前页 ...
使用 React 为 Chimee 开发插件
编者按:本文作者奇舞团前端开发工程师李喆明. Chimee1 是由奇舞团开源的一套可扩展的H5组件化播放器框架.由于前段时间业务有视频播放的需求所以使用了它,并基于它提供的插件系统之上开发了一系列的插 ...
使用 React.js 开发 Chrome 插件
(点击上方公众号,可快速关注) 来源:UncleChen unclechen.github.io/2017/06/16/使用ReactJS开发Chrome插件/ 一.背景相信看到这篇文章的人应该都用 ...
React 图片预览插件 rc-viewer @hanyk/rc-viewer
最近一个需求是图片要实现预览并且可以上下切换,react接触不是很久,查了好多资料,最终对@hanyk/rc-viewer下手,jquery用多了伙伴都知道viewer.js,一个很强大的图片预览插件 ...

react xlsx 数据转换excle 插件

react xlsx 数据转换excle 插件相关推荐

最新文章

热门文章