react-csv 表格导出并打印全部

最新推荐文章于 2023-11-01 15:04:31 发布

贺丢丢

最新推荐文章于 2023-11-01 15:04:31 发布

阅读量408

点赞数

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/hkx20000821/article/details/127683239

版权

//封装格式：
import React from "react";
import type { TableColumnsType, } from 'antd';
import { Button, Dropdown, Menu, Switch } from "antd"
import { SettingOutlined } from '@ant-design/icons';
import { CSVLink, CSVDownload } from "react-csv"
import Styles from "./index.module.css"
interface thead { title: string, dataIndex: string, render?: (a: any, b: any, c: number) => {} }
const Excel: React.FC<{ thead: TableColumnsType<any>, tbody: any[], tfoot?: string[], fun: Function, checked: boolean, isDropdown?: boolean, excessTable?: { thead: thead[], tbody: any[], tfoot: string[], }[], fileName: string }> = ({ thead, tbody, tfoot, fun, checked, isDropdown = true, excessTable, fileName }) => {
    //    如果分页时需要导出全部传
    //isDropdown为true
    //checked为size是否为99999的布尔值,类型:boolean
    //fun为更改分页器的onChange方法,类型:(page:number,size:number)=>void
    //不需要时传
    //isDropdown为false
    //checked任意boolean
    //fun任意方法

    // thead:必传，同antd Table的Column属性    需要title、dataIndex
    //tbody:必传,同antd Table的dataSource属性   与Column对应





    const csvData = React.useMemo(() => {
        const a: string[][] = []
        let t = thead.map((item) => {
            return String(item.title)
        })
        a.push(t)
        tbody.forEach((item1, index1) => {
            let body = thead.map((item2: any) => {
                if (item2.render) {
                    return String(item2.render(item1[item2.dataIndex], item1, index1))
                } else {
                    return String(item1[item2.dataIndex])
                }
            })
            a.push(body)
        })
        return a
    }, [thead, tbody])
    return (
        <div className={Styles.excel}>{isDropdown ?
            <Dropdown.Button
                overlay={
                    <Menu>
                        <Menu.Item>展示全部<Switch checked={checked} onChange={(checked) => {
                            if (checked) {
                                fun(1, 99999)
                            }
                            else {
                                fun(1, 20)
                            }
                        }} /></Menu.Item>
                    </Menu>
                } icon={<SettingOutlined />} >
                <CSVLink style={{
                    width: "100%",
                    height: "100%",
                    display: "block",
                    padding: "4px 15px",
                }} data={csvData} filename={fileName}>导出Excel</CSVLink>
            </Dropdown.Button>
            :
            <Button>
                <CSVLink style={{
                    width: "100%",
                    height: "100%",
                    display: "block",
                    padding: "4px 15px",
                }} data={csvData} filename={fileName}>导出Excel</CSVLink>
            </Button>
        }</div>
    )
}
export default Excel

//引入格式：
         <Excel fileName="财务报表" fun={onChange} checked={(size === 99999)} thead={[{
                    title: "序号", dataIndex: "xx", render: (_: any, _1: any, index) => {
                      return (page - 1) * size + index + 1;
                    },
                  },
                  {
                    title: '账户名称',
                    dataIndex: 'accountName',
                  },
                  {
                    title: '支付类型',
                    dataIndex: 'userName',
                  },
                  {
                    title: '支付金额',
                    dataIndex: 'payAmount',
                  },
                  {
                    title: '支付时间',
                    dataIndex: 'updatedAt',
                  }
                  ]} tbody={account?.data ?? []} tfoot={[]}>

                  </Excel>