react导出excel?

1、先安装依赖 自行百度搜索或csdn

2.引入:import table2excel from 'js-table2excel'

3、按钮点击事件(我是直接写在button按钮里面的 你们也可以写一个店家事件写进去)

javascript 复制代码
  onClick={() => {
                  console.log(list);
                  const column = [
                    //数据表单
                    {
                      title: 'ID', //表头名称title
                      key: 'id', //数据
                    },
                    {
                      title: '姓名',
                      key: 'name',
                    },
                    {
                      title: '性别',
                      key: 'sex',
                    },
                    {
                      title: '年龄',
                      key: 'age',
                    },
                    {
                      title: '学历',
                      key: 'education',
                    },
                    {
                      title: '用工形式',
                      key: 'title',
                    },
                    {
                      title: '档级',
                      key: 'grade',
                    },
                    {
                      title: '所在项目',
                      key: 'pname',
                    },
                    {
                      title: '在职状态',
                      key: 'status',
                    },
                  ];
                  let tableDatas = JSON.parse(JSON.stringify(list)); //将数据转化为字符串(list_data数据是接口数据,把名称换成自己的数据即可)
                  let datas = tableDatas;
                  table2excel(column, datas, '数据'); //表单数据名称
                }}
相关推荐
冻感糕人~2 小时前
【珍藏必备】ReAct框架实战指南:从零开始构建AI智能体,让大模型学会思考与行动
java·前端·人工智能·react.js·大模型·就业·大模型学习
小迷糊的学习记录2 小时前
0.1 + 0.2 不等于 0.3
前端·javascript·面试
空&白3 小时前
vue暗黑模式
javascript·vue.js
VT.馒头4 小时前
【力扣】2695. 包装数组
前端·javascript·算法·leetcode·职场和发展·typescript
css趣多多4 小时前
一个UI内置组件el-scrollbar
前端·javascript·vue.js
-凌凌漆-4 小时前
【vue】pinia中的值使用 v-model绑定出现[object Object]
javascript·vue.js·ecmascript
lbb 小魔仙5 小时前
【HarmonyOS实战】React Native 鸿蒙版实战:Calendar 日历组件完全指南
react native·react.js·harmonyos
大橙子额6 小时前
【解决报错】Cannot assign to read only property ‘exports‘ of object ‘#<Object>‘
前端·javascript·vue.js
WooaiJava7 小时前
AI 智能助手项目面试技术要点总结(前端部分)
javascript·大模型·html5
LYFlied7 小时前
从 Vue 到 React,再到 React Native:资深前端开发者的平滑过渡指南
vue.js·react native·react.js