前端导出excel两种方法

文章讲述了如何使用JavaScript进行数据处理并导出为Excel文件。通过fetchAPI发送POST请求,将数据转换为JSON格式,然后创建并下载Excel文件。同时,展示了如何构建Excel的表头和数据内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//导出
    const handleExport = () => {
        setExportLoading(true)
        const { isPackage, paymentDays } = form.getFieldsValue();
        fetch(`/orderdriverpc/api/report/exportExcel`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            redirect: 'follow',
            body: JSON.stringify({
                packageId: taskId?.split('-')[0],
                orgId: gridInfo !== '' ? gridInfo : (cityInfo !== '' ? cityInfo : (areaInfo !== '' ? areaInfo : (provInfo !== '' ? provInfo : ''))),
                orgLevel: tabValue,
                isPackage: isPackage,
                provinceCode: currentUser?.provinceCode,
                paymentDays: paymentDays.format('YYYY-MM-DD'),
            }),
        })
            .then((res) => res.blob())
            .then((e) => {
                setExportLoading(false)
                let objectUrl = URL.createObjectURL(e);
                const a = document.createElement('a');
                a.style.display = 'none';
                a.download = paymentDays.format('YYYY-MM-DD') + '组织维度报表.xlsx';
                a.href = objectUrl;
                a.click();
            });
    };

导出为excel文件的方法
    const downloadFileToExcel = () => {
        let option = {}; //option代表的就是excel文件
        let dataTable = []; //excel文件中的数据内容
        let theadArr = []; //excel表头
        let theadArrDataIndex = []; //excel表头索引
        dataForDownLoad?.tHead &&
            dataForDownLoad.tHead.length > 0 &&
            dataForDownLoad?.tHead.map((item) => {
                theadArr.push(item.title);
                theadArrDataIndex.push(item.dataIndex);
            });
        dataForDownLoad?.tBody &&
            dataForDownLoad.tBody.length > 0 &&
            dataForDownLoad?.tBody.map((item, index) => {
                if (!item.key) {
                    item.key = index;
                }
                let obj = {};
                theadArr.map((i, x) => {
                    obj[i] = item[theadArrDataIndex[x]];
                });
                dataTable.push(obj); //设置excel中每列所获取的数据源
            });
        option.fileName = dataForDownLoad?.title; //excel文件名称
        option.datas = [
            {
                sheetData: dataTable, //excel文件中的数据源
                sheetName: dataForDownLoad?.title, //excel文件中sheet页名称
                sheetFilter: theadArr, //excel文件中需显示的列数据
                sheetHeader: theadArr, //excel文件中每列的表头名称
            },
        ];
        let toExcel = new ExportJsonExcel(option); //生成excel文件
        toExcel.saveExcel(); //下载excel文件
    };
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值