前端--导出

这边记录我们公司后端做的导出接口和前端是如何对接的
    这边的技术栈是：
               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)
                    setStartDate1(null)
                }
            }
        } else {
            changeHange()
            if (hang() == 1) {
                setflag(false)
                setStartDate(null)
                setStartDate1(null)
            }
        }

        // if (res?.success) {
        //     message.success('保存成功')
        //     setflag(false)
        //     changeupadte()

        // }


    }





    const onChange = (date, dateString) => {

        setStartDate(dateString)
    };
    const onChange1 = (date, dateString) => {

        setStartDate1(dateString)
    };



    return (
        <>
            {!show ?
                <>
                    <DrawerForm
                        className={style.common}
                        submitter={{
                            resetButtonProps: { type: 'dashed' },
                            submitButtonProps: { style: { display: 'none' } },
                            resetButtonRender: (_, dom) => null,
                            //   <Button key="submit" type="primary" onClick={() => { submit() }}>保存</Button>
                            render: (props, defaultDoms) => {
                                return [
                                    <Button key="clean" onClick={() => { setflag(false) }}>取消</Button>,
                                    <Button key="close" type="primary" onClick={() => { submit('pass') }}>下载</Button>,

                                ]

                            }

                        }} drawerProps={{
                            closeIcon: null,
                            destroyOnClose: true,
                            extra: <CloseOutlined onClick={() => setflag(false)} />
                        }}
                        visible={flag}
                        onVisibleChange={(e) => {
                            setflag(e)
                        }}
                        width={440}
                        onFinish={() => submit()}
                        title={
                            <span style={{
                                color: '#1F1F1F',
                                fontSize: '18px',
                                fontWeight: 600,
                                height: '22px',
                                lineHeight: '22px'
                            }}>{title}</span>
                        }
                        trigger={Component}
                    >


                        <div style={{ ...style0 }}>
                            <div style={{ ...style1 }}>
                                导出开始时间
                            </div>

                            <DatePicker placeholder='请选择开始时间' style={{ ...style2 }} onChange={onChange} />
                        </div>
                        <div style={{ ...style0, margin: '20px 0' }}>
                            <div style={{ ...style1, }}>
                                导出结束结束
                            </div>

                            <DatePicker placeholder='请选择结束时间' style={{ ...style2 }} onChange={onChange1} />
                        </div>

                    </DrawerForm>
                </>
                :
                <>
                    <Button
                        onClick={() => { submit('pass') }}
                        type="primary">
                        导出
                    </Button>
                </>}

        </>

    )
}
const style0 = {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
}
const style1 = {
    width: '22%'
}
const style2 = {
    width: '76%'
}
const mapStateToProps = (state) => {
    return {
        
    };
};

export default connect(mapStateToProps)(NewExp)

第二步：封装请求导出js-----utils
     

export async function download(url, params) {
 
  // /api/blade-cust/custhubAppointment/export-customer
  const urls = `/api/${url}?${stringify(params)}`;

  const response = await fetch(urls, {
    method: 'GET',
    headers: {
      'Authorization': ``,
      'Blade-Auth': `Bearer ${getAccessToken()}`,
      'Content-Type': 'application/x-www-form-urlencoded',
    }
  });

  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }

  const blob = await response.blob();
  const contentDisposition = response.headers.get('content-disposition');

  //解析 decodeURIComponent  文件名字
  const filename = decodeURIComponent(contentDisposition).split('=')[1];
  const urlBlob = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  if (blob) {
    a.href = urlBlob;
    a.download = filename;
    document.body.appendChild(a);

    a.click();
    a.remove();
    window.URL.revokeObjectURL(urlBlob);
    return true
  }

}

 第三步：导入封好的js---使用

import { download } from '@/utils/utils'

  const hang = () => {
        return 1
    }

    const changeHange = async (e) => {
        try {
//这个都是 参数---接口需要
            const startTime = e.d1;
            const endTime = e.d2;
            const type = userRole;
            const bigType = defaultvalue;
            const params1 = {
                startTime,
                endTime,
                type,
                bigType
            };
            let d = await download('blade-cust/custhubCustomer/export-customer', params1)
            if (d) {
                message.success('导出成功,请保存')
                hang()
            }
        } catch (error) {
            console.error('Export failed:', error);
        }

    }
 //导出显示组件
  <NewExps title={'导出'}
                                hang={hang}
                                Component={
                                    <Button type="primary">
                                        导出
                                    </Button>}
                                changeHange={changeHange}
                            ></NewExps>