前端开发中ui(antd)表格导出为excel。详细步骤一看就会-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端开发中ui(antd)表格导出为excel。详细步骤一看就会。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

我们在开发的时候往往有这样的需求，将页面上的表格导出为excel文件。以随手写的demo为例。

前端表格导出excel,javascript,react.js,webpack,vscode

文章来源地址https://www.toymoban.com/news/detail-553916.html

1、首先我们需要下载一个插件，用于将页面中的数据转为excel文件

前端表格导出excel,javascript,react.js,webpack,vscode

可以通过我们的package.json文件去查看是否安装好

前端表格导出excel,javascript,react.js,webpack,vscode

2、在我们需要用到的页面去引用

前端表格导出excel,javascript,react.js,webpack,vscode

3、定义触发事件

//触发的节点
 <Button type="primary" htmlType="subout" onClick={downloadFileToExcel} >
    导出
 </Button>


//导出表格的方法，只看方法
  function downloadFileToExcel() {
    const datas=dataSource ? dataSource:'';//表格数据
    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:['新闻名称','区域','出版时间'],
        }
      ];
      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()
  }
//导出表格
  function downloadFileToExcel() {
    console.log(dataSource)
    const datas=dataSource ? dataSource:'';//表格数据
    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:['新闻名称','区域','出版时间'],
        }
      ];
      var toExcel = new ExportJsonExcel(option); 
      toExcel.saveExcel(); 
  } 
      //列表
      
      const columns = [
        {
          title: '新闻名称',
          dataIndex: 'title',
          key: '1',
        },
        {
          title: '区域',
          dataIndex: 'region',
          key: '2',
        },
        {
          title: '出版时间',
          dataIndex: 'publishTime',
          key: '3',
        },
      ];

    return (
      <div style={{marginTop:'10px',marginLeft:'10px'}}>
        <Form layout="inline">
            <Form.Item>
                <Select
                showSearch
                style={{ width: 200 }}
                placeholder="请输入新闻名称"
                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="请选择日期"
            />&nbsp;
            <DatePicker renderExtraFooter={() => 'extra footer'} 
            placeholder="请选择日期"/>
            </Form.Item>

            <Form.Item>
                <Button type="primary" htmlType="submit">
                    提交
                </Button>
            </Form.Item>
            <Form.Item>
                <Button type="primary" htmlType="subout" onClick={downloadFileToExcel} >
                    导出
                </Button>
            </Form.Item>
        </Form>

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

5、现在就可以导出了

前端表格导出excel,javascript,react.js,webpack,vscode