美文网首页
ant design pro 导出table内容到Excel

ant design pro 导出table内容到Excel

作者: MinaLing | 来源:发表于2019-05-15 20:28 被阅读0次

一、安装依赖

yarn add react-html-table-to-excel

二、导出控件

constructor(props) {
    super(props);
    this.tableRef = React.createRef();
  }

  componentDidMount() {
    const table = this.tableRef.current.querySelector('table');
    table.setAttribute('id', 'table-to-xls');
  }
render() {
return(
<ReactHTMLTableToExcel
              id="test-table-xls-button"
              className="download-table-xls-button"
              table="table-to-xls"
              filename="tablexls"
              sheet="tablexls"
              buttonText="Download as XLS"
            />
<Table
              columns={columns}
              dataSource={dataSource}
                ref={ref => {
                  this.table = ref;
                }}
              />
)
}

三、全量导出
ant design 默认table 每页显示10条,上述导出只会导出当前页的内容;可以增大每页显示条数,但不能设置scroll的y属性,否则数据无法导出。

相关文章

网友评论

      本文标题:ant design pro 导出table内容到Excel

      本文链接:https://www.haomeiwen.com/subject/bhnmaqtx.html