前端--导出

这边记录我们公司后端做的导出接口和前端是如何对接的
    这边的技术栈是：
               1： react 

               2： fetch

第一步：简单封装--导出界面

import { DrawerForm } from '@ant-design/pro-components';
import { CloseOutlined } from '@ant-design/icons';
import { Col, Input, Row, Select, DatePicker, message, InputNumber, Card, Button } from 'antd'
import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { DEPT_NAMESPACE } from "@/actions/dept";
import { getCurrentUser } from "@/utils/authority";
import { getDictBiz } from "@/utils/utils";
import { DICT_BIZ_NAMESPACE } from "@/actions/dictbiz";
import { clubSetMealSave, clubSetMealUpdate } from "@/services/club";
import { list } from '@/services/menu';

import style from './common.less';

const { TextArea } = Input;

function NewExp(props) {
     //show  是根据需要是否展示下方的弹窗
    //hang 是根据返回结果关闭弹窗
   //changeHange 是根据需要把参数返回出去
  //title  是弹窗的标题
 //Component  是触发弹窗的关键
    const {  title, Component, changeHange, hang, show } = props

    //  时间
    const [startDate, setStartDate] = useState(null)
    const [startDate1, setStartDate1] = useState(null)
    const [flag, setflag] = useState(false)


    const submit = async () => {

        // 判断时间
        if (!show) {
            if (startDate != null || startDate1 != null) {
                // 时间比较大小
                if (startDate1 < startDate) {
                    return message.error('结束时间不能小于开始时间')
                }
                let data = {
                    d1: startDate,
                    d2: startDate1,
                }
                changeHange(data)
                if (hang() == 1) {
                    setflag(false)
                    setStartDate(null)