eddieup / antd-table-saveas-excel

antd table to excel

简介

文档

二次封装better-xlsx，基于Antd Table的表格导出插件

安装

$ npm install antd-table-saveas-excel

关于 2.0 的版本更新内容

1. 优化了表头绘制逻辑，支持添加多个表头和表格
2. 新增了 api，提供更自由的布局（目前不支持横向添加表格）

从 1.0 升级到 2.0 的注意事项

除了新增的 api，其余只需注意：

1. 通过addColumns和addDataSource设置行高已被废弃，现在使用setRowHeight来设置

antd-table-saveas-excel's Issues

[bug] 宽度配置会设置到右侧的列上

宽度应用错误:

   excel
        .drawCell(0, excel.currentRow, {
          hMerge: 17,
          vMerge: 1,
          value: gameName,
          style: {
            border: true,
            bold: true,
            v: 'center',
            h: 'center',
          },
        })

第一个表宽度应用正确, 但是后面的表宽度布局又错位了, 而且布局也不是需要的

     excel.addRow()
      excel.addCol()
      excel
        .drawCell(0, excel.currentRow, {
          hMerge: 17,
          vMerge: 1,
          value: gameName,
          style: {
            border: true,
            bold: true,
            v: 'center',
            h: 'center',
          },
        })

https://eddieup.github.io/antd-table-saveas-excel/4examples#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8D%95%E5%85%83%E6%A0%BC%E6%B8%B2%E6%9F%93

How to change default font family?

I want change font family, but there are no options in IStyle.
Can I change default font family?

export type IStyle = {
  height?: number;
  width?: number;
  border?: boolean;
  borderColor?: string;
  background?: string;
  fontSize?: number;
  fontName?: string;
  color?: string;
  bold?: boolean;
  i?: boolean;
  u?: boolean;
  h?: IHorizontal;
  indent?: number;
  shrinkToFit?: boolean;
  textRotation?: number;
  v?: IVertical;
  wrapText?: boolean;
};

How to create rtl excel?

I need Excel to be rtl by default when I download it. Is there a way to do this?

Centering Header Titles

using this snippet doesn't seem to center header title (it works for body cells), headers are only centered when they span more than one column.
excel .setTHeadStyle({ h: "center", })

支持(考虑支持) 固定表头吗?

希望在 excel 中能够固定表头行 ,现有的 api 是否支持? 请问应该如何配置?

既如此,成本的的话, 能否同时支持固定列

表格下载的时候 表头render自定义的函数解析有问题

function getChildren(data) {
var _ref = data || {},
props = _ref.props;

if (typeof props.children === 'string') return props.children;
return props.children.reduce(function (prev, cur) {
if (typeof prev === 'string') {
return prev + ' ' + getChildren(cur);
}

return getChildren(prev) + ' ' + getChildren(cur);

}, '');
}

导出之后excel无法打开

我有一个表头是叫 is_active

然后我发现数据中如果这种带转义字符的（这个应该是java里的一个方块），导出之后文件就无法打开了，我贴了下其中一个例子，这个有可能解决吗

is_active: "\u0001"

custom header

hello, can this code base support custom header ? like this:

Excel saveAs失效

craco 构建项目，saveAs api会存在失效且Promise无异常报错信息。。
版本信息: craco 7.0.0
antd-table-saveas-excel 2.2.1
我排查下来我把better-xlsx的jszip版本升级到3.9.0 这个问题就解决了
jszip版本高于3.9.0则又会失效

ReferenceError: navigator is not defined

i'm using nextjs

Server Error
ReferenceError: navigator is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
Object.
/node_modules/antd-table-saveas-excel/dist/index.js (173:40)

文件格式错误

mac环境下 实际到处为 .zip文件 ，不是.xlsx

加入dataSource字段空值的异常处理

场景：dataIndex是string或者嵌套的string[]，从后端获取的dataSource中的对应字段可能是空或者undefined，此时生成excel会报错。举个例子，dataIndex = ['version', 'modifier']，某些行数据可能version字段是undefined，此时导出excel会报错：

希望的效果：和antd Table一样空数据就显示为空，不报错。

另外一个请求，IExcelColumn能否加入一个参数，指定该列是否加入excel中。因为网页上展示的某些列是无法或者不需要生成到excel中的，手动从columns剔除太麻烦了。

antd 4.7.1报错了

[@umijs/runtime] load component failed Error: Module "./antd-table-saveas-excel" does not exist in container.
while loading "./antd-table-saveas-excel" from webpack/container/reference/mf
at mf-va_remoteEntry.js:702:11
at LoadableComponent (http://localhost:8000/mf-dep_vendors-node_modules_umijs_runtime_dist_index_esm_js.f6dd37b3.async.js:1173:68)
at Route
at Switch
at Route
at Switch
at WithExceptionOpChildren (http://localhost:8000/.umi__plugin-layout__Layout.js:222:24)
at main
at Basic (http://localhost:8000/mf-dep_vendors-node_modules_antd_es_menu_index_js.ab762649.async.js:429:25)
at Adapter (http://localhost:8000/mf-dep_vendors-node_modules_antd_es_menu_index_js.ab762649.async.js:412:66)
at ErrorBoundary (http://localhost:8000/mf-dep_vendors-node_modules_ant-design_pro-layout_es_index_js-node_modules_antd_es__util_hooks_useFo-3b2c40.092d9fce.async.js:4492:87)
at FormProvider (http://localhost:8000/mf-dep_vendors-node_modules_ant-design_icons_es_icons_LoadingOutlined_js-node_modules_antd_es__util_-a9dcf0.4f4c72e4.async.js:2500:31)
at LocaleProvider (http://localhost:8000/mf-dep_vendors-node_modules_antd_es_config-provider_index_js-node_modules_antd_es_message_index_js.b28d7b57.async.js:896:87)
at ProviderChildren (http://localhost:8000/mf-dep_vendors-node_modules_antd_es_config-provider_index_js-node_modules_antd_es_message_index_js.b28d7b57.async.js:726:24)
at LocaleReceiver (http://localhost:8000/mf-dep_vendors-node_modules_antd_es_config-provider_context_js.6b64ec04.async.js:720:87)
at ConfigProvider (http://localhost:8000/mf-dep_vendors-node_modules_antd_es_config-provider_index_js-node_modules_antd_es_message_index_js.b28d7b57.async.js:834:13)
at SWRConfig$1 (http://localhost:8000/mf-dep_vendors-node_modules_ant-design_pro-provider_es_index_js.af96701f.async.js:2267:23)
at ConfigProviderWrap (http://localhost:8000/mf-dep_vendors-node_modules_ant-design_pro-provider_es_index_js.af96701f.async.js:236:23)
at WrapContent (http://localhost:8000/mf-dep_vendors-node_modules_ant-design_pro-layout_es_index_js-node_modules_antd_es__util_hooks_useFo-3b2c40.092d9fce.async.js:879:21)
at div
at section
at BasicLayout (http://localhost:8000/mf-dep_vendors-node_modules_antd_es_menu_index_js.ab762649.async.js:444:63)
at Adapter (http://localhost:8000/mf-dep_vendors-node_modules_antd_es_menu_index_js.ab762649.async.js:412:66)
at div
at Provider (http://localhost:8000/mf-dep_vendors-node_modules_ant-design_pro-layout_es_index_js-node_modules_antd_es__util_hooks_useFo-3b2c40.092d9fce.async.js:5786:31)
at BasicLayout (http://localhost:8000/mf-dep_vendors-node_modules_ant-design_pro-layout_es_index_js-node_modules_antd_es__util_hooks_useFo-3b2c40.092d9fce.async.js:289:67)
at BasicLayout (http://localhost:8000/.umi__plugin-layout__Layout.js:701:24)
at http://localhost:8000/.umi__plugin-layout__Layout.js:41:19
at LoadableComponent (http://localhost:8000/mf-dep_vendors-node_modules_umijs_runtime_dist_index_esm_js.f6dd37b3.async.js:1173:68)
at Route
at Switch
at Router (http://localhost:8000/mf-dep_vendors-node_modules_umijs_runtime_dist_index_esm_js.f6dd37b3.async.js:3489:30)
at RouterComponent (http://localhost:8000/mf-dep_vendors-node_modules_babel_runtime_helpers_esm_objectWithoutPropertiesLoose_js-node_modules_b-e4eb9f.e58b0f0b.async.js:610:23)
at http://localhost:8000/umi.js:1335:24
at http://localhost:8000/umi.js:1959:23

是否支持多个sheet？

DEMO中都是单sheet的表格文件，请问是否支持导出多个sheet？

columns 行列合并导出文件后报错

不支持ie啊， 使用了那些不兼容的东西吗， ie11都打不开啊， import 后项目直接挂了， 有没有什么办法能避免下， 至少在ie中不能用， 但是项目不会挂啊

引入后在ie中项目直接报错了

TypeError: props.children.reduce is not a function

使用上遇到錯誤，估計可能是render那邊的問題，請問是否有解

TypeError: props.children.reduce is not a function
getChildren
http://localhost:8888/mf-dep_vendors-node_modules_antd-table-saveas-excel_dist_index_esm_js.f86f75ec.async.js:996:25
getColumnRenderValue
http://localhost:8888/mf-dep_vendors-node_modules_antd-table-saveas-excel_dist_index_esm_js.f86f75ec.async.js:957:18
(anonymous function)
http://localhost:8888/mf-dep_vendors-node_modules_antd-table-saveas-excel_dist_index_esm_js.f86f75ec.async.js:1064:37
renderTbody
http://localhost:8888/mf-dep_vendors-node_modules_antd-table-saveas-excel_dist_index_esm_js.f86f75ec.async.js:1037:14
Excel.addDataSource
http://localhost:8888/mf-dep_vendors-node_modules_antd-table-saveas-excel_dist_index_esm_js.f86f75ec.async.js:1304:7
onClick
.ant-design-pro/src/pages/Factory/index.jsx:114
111 | <Button type="primary" style={{ display: "inline"}}
112 | onClick={()=>{
113 | const excel = new Excel();

114 | excel
^ 115 | .addSheet('test')
116 | .addColumns(columns)
117 | .addDataSource(factoryData)

原始碼:

const columns = [
{
title: 'ID',
dataIndex: 'id',
key: 'id',
render: (text) => {text},
},
{
title: '名稱',
dataIndex: 'name',
key: 'name',
render: (text) => {text},
},
{
title: '電話',
dataIndex: 'phone',
key: 'phone',
},
{
title: '所在縣市',
dataIndex: 'city',
key: 'city',
},
{
title: '地址',
dataIndex: 'address',
key: 'address',
},
{
title: '標籤',
key: 'tags',
dataIndex: 'tags',
render: tags => (
<>
{tags.map(tag => {
return (

{tag.name}

);
})}
</>
),
},
{
title: '管理',
key: 'action',
render: (text, record) => (

<Link
to={{pathname:"./Factory/Info",
state:{fid:record.id}
}} >編輯

),
},
];

function index(props) {
const history = useHistory();
const [factoryData, setFactoryData] = useState([]);

const getFactoryData = async () => {
await axiosRequest.get('/factories')
.then((response)=>{
console.log("factory data : ", response.data.data);
setFactoryData(response.data.data);
})
.catch((error)=>{console.log("fetch factory data error : ", error)});
};

useEffect(()=>{
getFactoryData();
},[]);

return (

<Button type="primary" style={{ display: "inline"}}
onClick={()=>{
const excel = new Excel();
excel
.addSheet('test')
.addColumns(columns)
.addDataSource(factoryData)
.saveAs('test.xlsx');
}}>
匯出

)
}
export default index;

=============

表头无法居中

setTHeadStyle({
h: 'center',
v: 'center',
})
上下居中是有效的,左右居中没有效果

是否有辦法removeColumn

如題，文檔中只有addColumns用以額外添加column
但由於我是使用antd pro中的proTable
因為要優化proTable自帶的搜索，有針對相同dataIndex的資料做了重複的column(一個hideInTable, 一個hideInSearch)
所以我需要讓其中一個column能夠從導出的表單中隱藏或移除
但目前似乎尚未支持這個用法?
我嘗試過在屬性中添加excelRender: false或excelRender: null，並不起作用 (excelRender: -1會報錯)
若是已經有可行的移除column方法還請不吝相告

text is always undefined when rendering a column

When rendering inside a column to get the current value from the database, it is always sending undefined values.

 { title: 'Test',  dataIndex: 'test' , __style__: RowStyle(), 
            render: (text, row, index) => {
                if(text)
                    return text;
                else
                    return <a>Option</a>;
            }
  },

Any other way to get the value in the render method?

Thanks

UglifyJs Unexpected character

Hello. When I build the project in prod I get an error. Error - [webpack] 'dist':
ris-bundle.js from UglifyJs
Unexpected character '`' [ris-bundle.js:108112,24] I spent two days and can't solve the problem. What kind of polyfills did not put ... Can you help?

loading on save data

is it possible to add loading if the data is being saved?

[bug] dataIndex not support array

导出的时候报错了，但是我无法知道这是如何造成的

TypeError: props.children.reduce is not a function

getChildren

.ant-design-pro/node_modules/antd-table-saveas-excel/dist/index.esm.js:597

  594 |     props = _ref.props;
  595 | 
  596 | if (typeof props.children === 'string') return props.children;
> 597 | return props.children.reduce(function (prev, cur) {
      | ^  598 |   if (typeof prev === 'string') {
  599 |     return prev + ' ' + getChildren(cur);
  600 |   }

建议添加excelRender的单独渲染

为了和antd table使用相同的columns,可以在原有的columns中添加excelRender属性区分开原有的render;
因为原有的render可能是弹窗或者其他形式跟excel上显示样式和内容会不同,为了不重写columns,可以添加一个属性excelRender,
单独进行excel上显示处理

表格数据render逻辑有问题，导致excelRender和render不起作用

antd-table-saveas-excel/src/utils/tbody.ts

Lines 31 to 47 in 2cf87d0

	if (column.excelRender) {
	renderValue = column.excelRender(value, data, index);
	} else if (column.render) {
	renderValue = column.render(value, data, index);
	}
	if (renderValue) {
	const { children, colSpan, rowSpan, __style__ } = getColumnRenderValue(
	renderValue,
	);
	value = children;
	hMerge = colSpan;
	vMerge = rowSpan;
	cellStyle = __style__;
	if (cellStyle && cellStyle.height) {
	row.setHeightCM(cellStyle.height);
	}
	}

第36行，如果经过render或者excelRender处理后的数据返回的本身是falsy的数值（比如0或者空字符串），那么这段代码就被跳过了，最后生成的表格里还是原始的value。
建议修改成if (renderValue !== null)