前端table导出表格excel，react-html-table-to-excel和js-export-excel

最新推荐文章于 2022-05-11 17:32:13 发布
最新推荐文章于 2022-05-11 17:32:13 发布
阅读量723 收藏 4
点赞数 3
文章标签： 前端 react.js typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37815935/article/details/121995987
版权

方法一：使用 react-html-table-to-excel

 官网：react-html-table-to-excel - npm

缺点：上次更新是 5年前了。这个只能导出.xls这种格式

需要获取到table dom节点，js可以用getElememtById，querySelector获取节点，

react类组件可以用ref获取，我用的是函数时组件测试，所以用的是useRef

 导出效果如下：（.xls在mac的number表格打开是乱的，用windows的excel可以打开）

 

方法二： 使用 js-export-excel

官网：js-export-excel - npm

优点：可以自定义按钮，给按钮加个方法就行了，也不用取获取dom节点

缺点：需要去配置columns列对应表头名称就好了，直接把antd的columns遍历取出dataIndex字段（跟表头和dataSource的字段对应）的值就行了，数据跟antd的dataSource一致

 

导出效果如下：

 

 

 

wiyon
关注
Export2Excel.js 免费下载、Export2Excel.js下载
10-31
文件名：Export2Excel.js，Export2Excel.js免费下载，可以使用此js在前端导出xlsx表格数据
前端将页面table或数据导出为Excel(.xlsx)&&导入Excel为json数组
huanhuan03的博客
09-03 398
前端将页面table或数据导出为Excel(.xlsx) 导出.xlsx
前端js导出Excel库(js-export-excel)在React/Vue中使用参考
qq_22777013的博客
05-11 1082
目录前言目前有个需求是不通过后端，前端直接导出表格数据。从网上找了一个库，发现很好用 ，所以简单记录下，方便日后查阅 GitHub地址： [https://github.com/cuikangjie/js-export-excel](https://github.com/cuikangjie/js-export-excel) 作者： [kin](https://github.com/cuikangjie)使用步骤1.引入到项目中2.使用总结最后 前言 目前有个需求是不通过后端，前端直接导出表格数据。从网上
react使用（react-html-table-to-excel）把table导出为Excel以及配合antd使用
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
06-04 4174
项目里有个把表格导出为Excel的功能，使用的是react-html-table-to-excel实现的也很简单，记录一下。 1.实现过程 1.下载依赖:npm install --save react-html-table-to-excel npm install --save react-html-table-to-excel 2.导入：importReactHTMLTableToExcelfrom'react-html-table-to-excel'//导表 import Rea...
React函数式组件，使用react-html-table-to-excel实现导出Excel功能
weixin_44240581的博客
03-27 1670
react-html-table-to-excel 简介 安装 yarn react-html-table-to-excel 属性说明 属性 类型 描述 table string 需要导出的table的id，需要为table标签添加，两者要对应 filename string Excel文件的名字 sheet string Excel文件里面Sheet的名字 id string 添加到按钮上的id属性 className string 添加到按钮上的class属性 but
datagrid-export文件及pdf和Excel表格使用demo.rar
11-06
首先，datagrid-export工具通常需要与前端数据展示组件结合使用，例如React的Ant Design的Table组件或者Vue的Element UI的Table组件。它提供了一套API，通过调用这些API，开发者可以方便地将数据网格的内容导出为PDF...
react-reactpdf使用React创建PDF文件
08-14
5. **表格和列表**：通过`<Table>`和`<List>`组件，你可以方便地创建复杂的表格和列表结构，这对于报告和数据分析尤为重要。 6. **交互性**：虽然PDF主要是静态的，但`react-pdf`允许添加一些基本的交互元素，如...
ui-table:Table表的UI组件
03-28
React表用户界面 基于 的UI组件 安装 npm i @habx/ui-table 特征 固定头 ...感谢以.xlsx或.csv导入和导出数据 列示例 export const IMEX_COLUMNS = [ { Header : 'Email' , accessor : 'email' ,
how-to-build-awesome-tables-with-react-table
04-06
本教程将深入探讨如何利用`react-table`实现排序、分页和CSV导出功能，以帮助你构建出令人惊叹的数据展示平台。 首先，安装`react-table`库。如果你的项目已经集成了`create-react-app`，可以通过npm或yarn来添加...
:abacus: 基于ui-core的react-table UI组件
06-08
) 导入/导出 借助 exceljs 列以 .xlsx 或 .csv 格式导入和导出数据示例导出 const IMEX_COLUMNS = [ { Header: 'Email', accessor: 'email', meta: { imex: { type: 'string' as const, }, }, }, { Header: 'Age', ...
ReactHTMLTableToExcel:将HTML表格转换为Excel文件并下载
05-28
ReactHTMLTableToExcel 从HTML表格元素提供客户端生成的Excel（.xls）文件。 没有其他依赖 安装 npm install --save react-html-table-to-excel 特征 将HTML表格下载为.xls格式的Excel文件 没有服务器端代码 设置所需的.xls文件名和工作表 设置样式所需的类名和ID 支持的IE 11 选项 可用属性的列表可以在下面找到。 这些必须传递给包含的ReactHTMLTableToExcel组件。 财产 类型 描述 桌子 细绳 HTML表格元素的ID属性。 文件名 细绳 Excel文件名。 床单 细绳 Excel工作表的名称。 ID 细绳 按钮元素的ID属性。 班级名称 细绳 按钮元素的类属性。 buttonText 细绳 按钮文字。 例子 import React , { Compone
Export2Excel.js
10-14
封装导出表格js文件！
js-export-excel 实现导出excel
liang1gsdsdfd的博客
02-19 2032
安装js-export-excel npm install js-export-excel 引入js import JsExportExcel from 'js-export-excel' 导出按钮 <a-button icon="plus" @click="exportExcel" type="primary">导出</a-button> js方法 exportExcel () { // data数据 let dataTable = [{ 'Test1'
React项目中，如何把数据导出到Excel文件
fengzhen8023
07-18 1547
写在前面 无论是做项目还是自己学习过程中，我们可能会遇到导出数据的需求，比如导出数据到Excel文件。 为了方便大家的学习和开发，这里介绍一种导出数据到Excel文件的方法。 方法简介 我在这里使用 exceljs 包来导出数据，如果你有兴趣，可以阅读一下他们的文档： 英文文档：https://github.com/exceljs/exceljs/blob/HEAD/README.md 中文文档：https://github.com/exceljs/exceljs/blob/HEAD/README_zh.m
react 导出数据到Excel
weixin_50900024的博客
08-20 1026
首先 第一件事先下载插件 npm install js-export-excel 第二件事 在你想要导出数据的组件中引入插件 import ExportJsonExcel from 'js-export-excel'; 官方推荐使用的是json数据格式 然后我这边也写了一下试了试 这里拿出其中的一组数据展示 ，这是一个json数据结构 在这一组数据中可以看到他是一个多层结构的数据 也就是说你在遍历一层数据的时候也要想到怎么处理第二层数据 我的处理方法简单粗暴 const data = [
使用Export2Excel.js导出excel
weixin_44860135的博客
11-24 4769
使用Export2Excel.js导出excel安装依赖新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 安装依赖 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器
react 导出excel文件的几种方式
xJ_fang的博客
01-06 1万+
react 导出excel文件的四种方式
HTML Table to Excel
高明的专栏
03-24 371
1.要导出的table <table> <tr> <td>姓名</td> <td>邮箱</td> <td>电话</td> </tr> <tr> <td>高sss</td> <td>xxx@xxx.com.cn</td> <td>xxxx</td> <
vue-纯前端实现导出excel
热门推荐
beichengliulixue的博客
08-25 1万+
vue-纯前端实现数据导入导出 xlsx地址
react实现table表格导出excel表格功能
最新发布
05-31
可以使用第三方库 `react-table-to-excel` 来实现表格导出功能。 首先，安装该库： ``` npm install react-table-to-excel ``` 然后，在你的组件中引入它： ```jsx import ReactTableToExcel from "react-table-...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值