React 表格组件导出 Excel

原创已于 2022-07-04 11:18:25 修改 · 5.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#React Table To Excel

于 2018-11-30 12:22:52 首次发布

React 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何使用React Table组件直接导出Excel文件，避免了通过后台接口处理的额外工作。作者分享了GitHub资源，并指出常规方法可能出现的表头或内容丢失问题，提出了新的实现思路，利用HTML原生table标签结合React表格组件来完成完整Excel的下载。

以前我们导出表格都是走的后台接口调用，后台处理数据给我们返回Excel文件，这样就会增加后台的工作量，自从知道React Table表格组件可以导出excel后，就去研究了一下：

GitHub地址：
GitHub - zsusac/ReactHTMLTableToExcel: Convert HTML table to Excel file and download

安装插件react-html-table-to-excel：

npm install --save react-html-table-to-excel
国内的由于各种原因可以安装淘宝镜像，用下面方法安装插件
//cnpm install --save react-html-table-to-excel

安装插件react-dom：

npm install --save react-dom
国内的由于各种原因可以安装淘宝镜像，用下面方法安装插件
//cnpm install --save react-dom

引入依赖：

import ReactHTMLTableToExcel from 'react-html-table-to-excel';
const ReactDOM = require('react-dom');

React Table组件写法如下：

//下方Table的Ref<定义在constructor，*React已经不允许用字符串的方法定义组件的ref了>
constructor(props) {
    super(props);
    this.IversonRef= React.createRef();
}      
//Table中有数据后<后台拿到数据后,在拿数据方法的后面定义如下：>
const tableCon = ReactDOM.findDOMNode(this.IversonRef.current)
const table = tableCon.querySelector('table');   
table.setAttribute('id','table-to-xls');
//组件中写法如下：
<ReactHTMLTableToExcel
    // id="test-table-xls-button"
    className="download-table-xls-button"
    table="table-to-xls"
    filename="XX统计表"
    sheet="XX统计表"
    buttonText="下载XX统计表"/>
<Table
    ref={this.IversonRef}
/>

*特别的，用上面的方法并不能下载完整的Excel，因为React的表格分为antd-table-header和antd-table-body，下载下来的表格要么没有表头要么没有表格的内容Emmmmmmm，这样做显然是不对的

所以又想到另一个实现方法，思路如下：

用Html原生的table标签去实现下载功能<让这个table不显示display:'none'>，用React表格组件去实现显示QAQ

实现代码如下：

{TableDataList && TableDataList.length>0 ?
       <ReactHTMLTableToExcel
        //className="btnAdd"
        table="TableDataListToXLS"
        filename="XX统计表"
        sheet="XX统计表"
        buttonText="下载XX统计表Excel"/>
: null}
<table id="TableDataListToXLS" style={{display:'none'}}>
    <tbody>
       <tr>
          <th>表头01</th>
          <th>表头02</th>
          <th>表头03</th>
        </tr>
      {TableDataList&& TableDataList.length>0 ?
         TableDataList.map(x=>{
           return(
             <tr key={x.ID}>
                <td>{x.A}</td>
                <td>{x.B}</td>
                <td>{x.C}</td>
             </tr>
            )
         }) : <tr></tr>}
     </tbody>
</table>

其中key={x.ID}是为了给每一行给定一个唯一的标识~~~

END