我們?cè)陂_發(fā)的時(shí)候往往有這樣的需求，將頁(yè)面上的表格導(dǎo)出為excel文件。以隨手寫的demo為例。

?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-553916.html

1、首先我們需要下載一個(gè)插件，用于將頁(yè)面中的數(shù)據(jù)轉(zhuǎn)為excel文件

?????????

?可以通過我們的package.json文件去查看是否安裝好

2、在我們需要用到的頁(yè)面去引用

?3、定義觸發(fā)事件

//觸發(fā)的節(jié)點(diǎn)
 <Button type="primary" htmlType="subout" onClick={downloadFileToExcel} >
    導(dǎo)出
 </Button>


//導(dǎo)出表格的方法，只看方法
  function downloadFileToExcel() {
    const datas=dataSource ? dataSource:'';//表格數(shù)據(jù)
    var option={};
    let dataTable = [];
    if (datas) {
        datas.map((item)=>{   
            let obj = {
                title: item.title,  
                region: item.region,
                publishTime: item.publishTime,  
            }
            dataTable.push(obj);
            return dataTable
        })
     
      }
      option.fileName = '新聞信息'
      option.datas=[
        {
          sheetData:dataTable,
          sheetName:'sheet',
          sheetFilter:['title','region','publishTime'],
          sheetHeader:['新聞名稱','區(qū)域','出版時(shí)間'],
        }
      ];
      var toExcel = new ExportJsonExcel(option); 
      toExcel.saveExcel(); 
  } 

4、完整代碼(能看懂前面的第4段可以不看)

import React, { Component } from 'react'
import ExportJsonExcel from 'js-export-excel';
import { Form ,Button,DatePicker,Table,Select } from 'antd';
import axios from 'axios';
const { Option } = Select;

export default class Mylist extends Component {
    state={
        dataSource:null,
        children:[]
    }
   
    componentDidMount(){
        const list=[]
        axios.get('http://localhost:5000/news').then((res)=>{
            res.data.map((Item)=>{
                return (Item.key=Item.id)
            })
            this.setState({dataSource:res.data})
            res.data.map((it)=>{
                return(list.push(<Option value={it.title} key={it.id}>{it.title}</Option>))
            })
            this.setState({children:list})
        })
    }
  render() {
    let {dataSource,children} =this.state
//下拉搜索框

  function onChange(value) {
    console.log(`selected ${value}`);
  }
  
  function onBlur() {
    onChange()
  }
//導(dǎo)出表格
  function downloadFileToExcel() {
    console.log(dataSource)
    const datas=dataSource ? dataSource:'';//表格數(shù)據(jù)
    console.log(datas)
    var option={};
    let dataTable = [];
    if (datas) {
        datas.map((item)=>{
            let obj = {
                title: item.title,
                region: item.region,
                publishTime: item.publishTime,
            }
            dataTable.push(obj);
            return dataTable
        })
     
      }
      option.fileName = '新聞信息'
      option.datas=[
        {
          sheetData:dataTable,
          sheetName:'sheet',
          sheetFilter:['title','region','publishTime'],
          sheetHeader:['新聞名稱','區(qū)域','出版時(shí)間'],
        }
      ];
      var toExcel = new ExportJsonExcel(option); 
      toExcel.saveExcel(); 
  } 
      //列表
      
      const columns = [
        {
          title: '新聞名稱',
          dataIndex: 'title',
          key: '1',
        },
        {
          title: '區(qū)域',
          dataIndex: 'region',
          key: '2',
        },
        {
          title: '出版時(shí)間',
          dataIndex: 'publishTime',
          key: '3',
        },
      ];

    return (
      <div style={{marginTop:'10px',marginLeft:'10px'}}>
        <Form layout="inline">
            <Form.Item>
                <Select
                showSearch
                style={{ width: 200 }}
                placeholder="請(qǐng)輸入新聞名稱"
                optionFilterProp="children"
                onChange={onChange}
                onBlur={onBlur}
                filterOption={(input, option) =>
                option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
                >
               {children}
                </Select>
            </Form.Item>

            <Form.Item>
            <DatePicker renderExtraFooter={() => 'extra footer'} 
            placeholder="請(qǐng)選擇日期"
            />&nbsp;
            <DatePicker renderExtraFooter={() => 'extra footer'} 
            placeholder="請(qǐng)選擇日期"/>
            </Form.Item>

            <Form.Item>
                <Button type="primary" htmlType="submit">
                    提交
                </Button>
            </Form.Item>
            <Form.Item>
                <Button type="primary" htmlType="subout" onClick={downloadFileToExcel} >
                    導(dǎo)出
                </Button>
            </Form.Item>
        </Form>

        <Table dataSource={dataSource} columns={columns} />;
      </div>
    )
  }
}

5、現(xiàn)在就可以導(dǎo)出了?

?

6、打開查看?

?

?

?

到了這里，關(guān)于前端開發(fā)中ui(antd)表格導(dǎo)出為excel。詳細(xì)步驟一看就會(huì)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！