antd 显示解析html标签,react+antd使用react-html-table-to-excel实现导出功能

react+antd使用react-html-table-to-excel实现导出功能

npm下载依赖包

基于react 和react-dom

npm install react-html-table-to-excel --savehtml

使用

import React, {PureComponent} from 'react';

import ReactDOM from 'react-dom';

import ReactHTMLTableToExcel from 'react-html-table-to-excel';

class Table extends PureComponent {

constructor(props) {

super(props);

}

this.state = {

ref:this.props.attr // 从父组件获取参数判断该table是否须要导出

}

componentDidMount() {

if (this.state.ref == 'table') {

const tableCon = ReactDOM.findDOMNode(this.refs['table']); // 经过ref属性找到该table

const table = tableCon.querySelector('table'); //获取table

table.setAttribute('id','table-to-xls') //给该table设置属性

}

}

render() {

const { attr } = this.props;

return (

id="test-table-xls-button"

className="download-table-xls-button"

table="table-to-xls"

filename="文件名称"

sheet="工做表名称"

buttonText="导出按钮名称"/>

// 下为antd table组件

...省略其余属性配置

ref={attr || ''}

/>

);

}

}

export default Table