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的更多相关文章

  1. HTML Table导出为Excel的方法

    HTML Table导出为Excel的方法: 直接上源码 <html> <head> <meta http-equiv="Content-Type" ...

  2. 【ASP.NET】C# 将HTML中Table导出到Excel(TableToExcel)

    首先,说下应用场景 就是,把页面呈现的Table 导出到Excel中.其中使用的原理是 前台使用ajax调用aspx后台,传递过去参数值,导出.使用的组件是NPOI. 前台调用: <script ...

  3. 使用js代码将HTML Table导出为Excel

    使用js代码将HTML Table导出为Excel的方法: 直接上源码 <html> <head> <meta http-equiv="Content-Type ...

  4. 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; ...

  5. 将table导出为Excel的标准无乱码写法

    导出为Excel有很多种写法,对于一些复杂的格式,笔者喜欢在后台先拼成一个<table>,再使用Response输出. 如果数据中包含中文或者一些特殊字符,可很多不规范的写法都会导致页面乱 ...

  6. MVC 将视图页table导出成excel

    前台代码: <table class="tablelist" id="myTable">    <thead>        <t ...

  7. HTML table导出到Excel中的解决办法

    第一部分:html+js 1.需要使用的表格数据(先不考虑动态生成的table) <table class="table tableStyles" id="tabl ...

  8. .Net直接将Web页面table导出到Excel

    项目管理系统有个统计表需要导出到Excel表中.常用的方法是在后台C#代码查询数据再写入Excel表中最后保存在目标路径. 为减轻数据库服务器的压力和保持页面的样式,能否直接将页面的表格直接导出到Ex ...

  9. 将table导出为excel格式文件

    html: <table cellpadding="0" cellspacing="0" class="data_table" id= ...

随机推荐

  1. 2013-2-1 pdf中无法用金山词霸取词问题

    打开pdf的编辑——〉首选项——〉一般——〉选项——〉开始——〉只有经过认证的插件,把‘checkbox’里的勾去掉,重启. ★在acrobat reader启动画面里如果没有加载xdict32(工具 ...

  2. HDU 2066最短路径Dijkstra、

    思路:枚举所有起点城市然后比较每个起点所去喜欢城市的最小距离 #include<cstdio> #include<cmath> #include<cstring> ...

  3. Python--day64--Bootstrap样式的使用

    Bootstrap样式网址:https://v3.bootcss.com

  4. Vue 获取DOM元素ref

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. [C++] 检查随机内存溢出

    C++程序的随机内存溢出是非常难处理的,windows提供了一些工具来缓解这个问题. windows debuger提供的Global Flags可以设置"enable heap tail ...

  6. H3C 基本ACL

  7. 解决:javac: 无效的目标发行版: 1.8

    原 解决:javac: 无效的目标发行版: 1.8 2017年06月14日 16:21:12 代码也文艺 阅读数 44795 版权声明:本文为博主原创文章,未经博主允许不得转载. https://bl ...

  8. linux测试 scullpipe 驱动

    我们已经见到了 scullpipe 驱动如何实现阻塞 I/O. 如果你想试一试, 这个驱动的源码 可在剩下的本书例子中找到. 阻塞 I/O 的动作可通过打开 2 个窗口见到. 第一个可运行 一个命令诸 ...

  9. html2canvas生成图片报错处理办法

    详见大佬博客链接: link.(https://www.jianshu.com/p/22bd5b98e38a) 需要注意的是要生成的网页中带的网络图片地址(如放在阿里云服务器图库的图片)经常有跨域报错 ...

  10. 2019-1-29-UWP-IRandomAccessStream-与-Stream-互转

    title author date CreateTime categories UWP IRandomAccessStream 与 Stream 互转 lindexi 2019-01-29 16:33 ...