phptexthtml转换xls技巧_react 将Tabel数据导出为报表xls

1）安装依赖：

npm install react-html-table-to-excel

2）引入：

import ReactDOM from 'react-dom'

//这个是引入按钮组件，是内部封装了转为xls的方法

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

1）本实现结合实际，利用仿照点击去完成，依赖供应的按钮隐蔽掉（样式丢脸）

html:

<Button onClick={this.down}>导出</Button>

//不用该按钮，用Button进行仿照点击这个按钮触发下载，并隐蔽：display:none

<span style={{ display: "none" }}>

<ReactHTMLTableToExcel

className="downloadButton"

table="table-to-xls"

filename="批量审核失落败列表"

sheet="失落败列表信息"

buttonText="导出" />

</span>

<Table

id='tables'

columns={[{ title: 'Name', dataIndex: 'name', },

{ title: 'Name', dataIndex: 'name', },]}

render: (text, recode, index) => <Dail json={{ text: text }}></Dail>,

},

dataSource={[{ name: "你好", }, { name: "你好", },]} />

js:

down = () => {

const tableCon = ReactDOM.findDOMNode(document.getElementById("tables"))

//利用reactdom.finddomnode()来获取真实DOM节点

const table = tableCon.querySelector('table')

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

document.getElementById("button-download-as-xls").click()

}

1）安装好依赖后，Table组件须要加上id,不同table须要不同ID，用于拿到原生的table;

2) 在仿照点击事宜down内写上固定的几行代码，不同table须要不同down,但是代码基本一样，须要更换table的id

3）仿照点击的Dom的id是依赖组件的按钮id,可以在前端浏览器掌握台显示查看，是固定值b utton-download-as-xls。

希望本文对须要前端处理下载的小伙伴有用。