Antd将Table导出为Excel
Antd将Table导出为Excel
在最近的项目中,需要把表格中的数据导出给财务进行统计,网上很多一键导出的按钮都没用。经过东拼西凑,最终搞定了导出,自己封装了组件。
import { File } from 'better-xlsx';
import { saveAs } from 'file-saver';
function ExportExcel(column, dataSource, fileName = 'example') {
// 新建工作谱
const file = new File();
// 新建表
let sheet = file.addSheet('sheet-test');
// 获取表头行数
let depth = getDepth(column);
// 获取表头的列数
let columnNum = getColumns(column);
// 新建表头行数
let rowArr = [];
for (let k = 0; k < depth; k++) {
rowArr.push(sheet.addRow());
}
// 根据列数填充单元格
rowArr.map(ele => {
for (let j = 0; j < columnNum; j++) {
let cell = ele.addCell();
cell.value = j;
}
});
// 初始化表头
init(column, 0, 0);
// 按顺序展平column
let columnLineArr = [];
columnLine(column);
// 根据column,将dataSource里面的数据排序,并且转化为二维数组
let dataSourceArr = [];
dataSource.map(ele => {
let dataTemp = [];
columnLineArr.map(item => {
dataTemp.push({
[item.dataIndex]: ele[item.dataIndex],
value: ele[item.dataIndex],
});
});
dataSourceArr.push(dataTemp);
});
// debugger;
// 绘画表格数据
dataSourceArr.forEach((item, index) => {
//根据数据,创建对应个数的行
let row = sheet.addRow();
row.setHeightCM(0.8);
//创建对应个数的单元格
item.map(ele => {
let cell = row.addCell();
if (ele.hasOwnProperty('num')) {
cell.value = index + 1;
} else {
cell.value = ele.value;
}
cell.style.align.v = 'center';
cell.style.align.h = 'center';
});
});
//设置每列的宽度
for (let i = 0; i < 4; i++) {
sheet.col(i).width = 20;
}
file.saveAs('blob').then(function(content) {
saveAs(content, fileName + '.xlsx');
});
// 按顺序展平column
function columnLine(column) {
column.map(ele => {
if (ele.children === undefined || ele.children.length === 0) {
columnLineArr.push(ele);
} else {
columnLine(ele.children);
}
});
}
// 初始化表头
function init(column, rowIndex, columnIndex) {
column.map((item) => {
let hCell = sheet.cell(rowIndex, columnIndex);
// 如果没有子元素, 撑满列
if (item.title === '操作') {
hCell.value = '';
return null;
} else if (item.children === undefined || item.children.length === 0) {
// 第一行加一个单元格
hCell.value = item.title;
hCell.vMerge = depth - rowIndex - 1;
hCell.style.align.h = 'center';
hCell.style.align.v = 'center';
columnIndex++;
// rowIndex++
} else {
let childrenNum = 0;
function getColumns(arr) {
arr.map(ele => {
if (ele.children) {
getColumns(ele.children);
} else {
childrenNum++;
}
});
}
getColumns(item.children);
hCell.hMerge = childrenNum - 1;
hCell.value = item.title;
hCell.style.align.h = 'center';
hCell.style.align.v = 'center';
let rowCopy = rowIndex;
rowCopy++;
init(item.children, rowCopy, columnIndex);
// 下次单元格起点
columnIndex = columnIndex + childrenNum;
}
});
}
// 获取表头rows
function getDepth(arr) {
const eleDepths = [];
arr.forEach(ele => {
let depth = 0;
if (Array.isArray(ele.children)) {
depth = getDepth(ele.children);
}
eleDepths.push(depth);
});
return 1 + max(eleDepths);
}
function max(arr) {
return arr.reduce((accu, curr) => {
if (curr > accu) return curr;
return accu;
});
}
// 计算表头列数
function getColumns(arr) {
let columnNum = 0;
arr.map(ele => {
if (ele.children) {
getColumns(ele.children);
} else {
columnNum++;
}
});
return columnNum;
}
}
export default ExportExcel;
注意,这个函数传入的column参数格式是这样的:
[
{
title: '序号',
dataIndex: 'id'
},
{
title: '日期',
dataIndex: 'createTime',
render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
},
{
title: '运动',
dataIndex: 'steps',
render: val => `${val}步`
},
{
title: '睡眠',
dataIndex: 'sleep',
render: val => `${val}分钟`
},
{
title: '心率',
dataIndex: 'heartRate',
render: val => `${val}次/分钟`
},
{
title: '血糖',
dataIndex: 'bloodGlucose',
render: val => `${val}mol/L`
},
{
title: '血压',
dataIndex: 'bloodPressure',
render: val => `${val}mmHG`,
},
{
title: '体重',
dataIndex: 'weight',
render: val => `${val}KG`
},
{
title: '身高',
dataIndex: 'height',
render: val => `${val}cm`
},
{
title: '年龄',
dataIndex: 'age',
render: val => `${val}岁`
}
]
Antd将Table导出为Excel的更多相关文章
- HTML Table导出为Excel的方法
HTML Table导出为Excel的方法: 直接上源码 <html> <head> <meta http-equiv="Content-Type" ...
- 【ASP.NET】C# 将HTML中Table导出到Excel(TableToExcel)
首先,说下应用场景 就是,把页面呈现的Table 导出到Excel中.其中使用的原理是 前台使用ajax调用aspx后台,传递过去参数值,导出.使用的组件是NPOI. 前台调用: <script ...
- 使用js代码将HTML Table导出为Excel
使用js代码将HTML Table导出为Excel的方法: 直接上源码 <html> <head> <meta http-equiv="Content-Type ...
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式
先上代码 <script type="text/javascript" language="javascript"> var idTmr; ...
- 将table导出为Excel的标准无乱码写法
导出为Excel有很多种写法,对于一些复杂的格式,笔者喜欢在后台先拼成一个<table>,再使用Response输出. 如果数据中包含中文或者一些特殊字符,可很多不规范的写法都会导致页面乱 ...
- MVC 将视图页table导出成excel
前台代码: <table class="tablelist" id="myTable"> <thead> <t ...
- HTML table导出到Excel中的解决办法
第一部分:html+js 1.需要使用的表格数据(先不考虑动态生成的table) <table class="table tableStyles" id="tabl ...
- .Net直接将Web页面table导出到Excel
项目管理系统有个统计表需要导出到Excel表中.常用的方法是在后台C#代码查询数据再写入Excel表中最后保存在目标路径. 为减轻数据库服务器的压力和保持页面的样式,能否直接将页面的表格直接导出到Ex ...
- 将table导出为excel格式文件
html: <table cellpadding="0" cellspacing="0" class="data_table" id= ...
随机推荐
- 2013-2-1 pdf中无法用金山词霸取词问题
打开pdf的编辑——〉首选项——〉一般——〉选项——〉开始——〉只有经过认证的插件,把‘checkbox’里的勾去掉,重启. ★在acrobat reader启动画面里如果没有加载xdict32(工具 ...
- HDU 2066最短路径Dijkstra、
思路:枚举所有起点城市然后比较每个起点所去喜欢城市的最小距离 #include<cstdio> #include<cmath> #include<cstring> ...
- Python--day64--Bootstrap样式的使用
Bootstrap样式网址:https://v3.bootcss.com
- Vue 获取DOM元素ref
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [C++] 检查随机内存溢出
C++程序的随机内存溢出是非常难处理的,windows提供了一些工具来缓解这个问题. windows debuger提供的Global Flags可以设置"enable heap tail ...
- H3C 基本ACL
- 解决:javac: 无效的目标发行版: 1.8
原 解决:javac: 无效的目标发行版: 1.8 2017年06月14日 16:21:12 代码也文艺 阅读数 44795 版权声明:本文为博主原创文章,未经博主允许不得转载. https://bl ...
- linux测试 scullpipe 驱动
我们已经见到了 scullpipe 驱动如何实现阻塞 I/O. 如果你想试一试, 这个驱动的源码 可在剩下的本书例子中找到. 阻塞 I/O 的动作可通过打开 2 个窗口见到. 第一个可运行 一个命令诸 ...
- html2canvas生成图片报错处理办法
详见大佬博客链接: link.(https://www.jianshu.com/p/22bd5b98e38a) 需要注意的是要生成的网页中带的网络图片地址(如放在阿里云服务器图库的图片)经常有跨域报错 ...
- 2019-1-29-UWP-IRandomAccessStream-与-Stream-互转
title author date CreateTime categories UWP IRandomAccessStream 与 Stream 互转 lindexi 2019-01-29 16:33 ...