NodeJS 通过添加标题和一些计算数据将两个excel数据导出到单个excel工作表中

jckbn6z7  于 2023-03-22  发布在  Node.js
关注(0)|答案(3)|浏览(181)

我正在使用react-data-export导出我的react项目中的excel工作表。我需要在单个文件中导出两个excel数据。示例

如果不可能的上述模块,请建议我一个新的方法来做到这一点。

jaql4c8m

jaql4c8m1#

我已经发布了一个simple proof of concept,它应该是有用的,以了解如何有可能满足需求的问题,以出口两个excel数据在一个文件。
x1c 0d1x在**ExcelSheet组件中,可以传递一个dataSet,它允许任意数量的数据表和其他特性,例如列标题和数据表与后续数据表之间的行和列偏移量。

  • ExcelSheetdata属性用于一个数据表。
  • ExcelSheetdataSet属性用于一个或多个数据表

react-data-exportgit repo中也有一个simple_excel_export_02的例子,但我还没能让它工作,还有一个open issue,里面有我为我的POC学到的一些建议。

km0tfn4u

km0tfn4u2#

这是我的解决方案。
ExcelSheet内部有一个名为dataSet的属性。它用于生成数据到我们的Excel。因此,您可以将多个数据添加到dataSet。请参阅下面的代码。在这里,我使用名为generatedData的字段,其中包含Excel的行和列。因此,您可以在单个Excel工作表中添加数组内的多个数据对象。结果将完全符合您上面的要求

import ReactExport from 'react-data-export';
const ExcelFile = ReactExport.ExcelFile;
const ExcelSheet = ReactExport.ExcelFile.ExcelSheet;
const ExcelColumn = ReactExport.ExcelFile.ExcelColumn;

const VesselReportExcelGenerator = (props) => {
    const [exportModalOpen, setExportModalOpen] = useState(false);
    const [excelData, setExcelData] = useState([]);
    const vesselReportApi = new VesselReportApi();
    var generatedData = [
        {
            columns: columns,
            data: excelData
        },
        {
            columns: columns,
            data: excelData
        }
    ];

    useEffect(() => {
        fetchVesselReportFormStructure();
    }, []);

    const fetchVesselReportFormStructure = async () => {
        try {
            const vesselReportFormStructure = await vesselReportApi.getVesselReportFormStructure();
            setExcelData(vesselReportFormStructure);
        } catch (error) {
            console.log(error);
            props.setMessages([{type : "danger", message : 'Something went wrong. Please try again!'}]);
        }
    };

    return (
        <Container fluid className="VesselReportExcelBackground">
            <Col lg={7}>
                <Row style={{ justifyContent: 'center', height: '2rem',paddingTop: "40px",height: "10%" }}>
                    <div style={{fontSize: "2rem",color: config.KSTColors.MAIN,fontWeight: "900",}}>
                        OFFLINE VESSEL REPORT
                    </div>
                </Row>
                {/* Export Vessel report excel UI */}
                <Row xs={12} md={3} style={{backgroundColor: config.KSTColors.CARD_BG,height: "150px",borderRadius: "15px",marginTop: "40px"}}>
                    <Col xs={3} lg={3} style={{ padding: "0px" }}>
                        <Button className="VesselReportExcelEditButton" style={{ backgroundColor: config.KSTColors.MAIN,borderColor: config.KSTColors.MAIN,width: "100%"}} onClick={() => setExportModalOpen(true)}>
                            {/* <FontAwesomeIcon icon={faFileExport} style={{color: config.KSTColors.ICON,fontSize: "60px"}} /> */}
                            <img src={VesselExportIMG} alt="Excel Export" style={{height: "120px"}}/>
                        </Button>
                    </Col>
                    <Col xs={6} lg={6}>
                        <div style={{display: "flex",width: "100%",height: "100%",flexDirection: "column",justifyContent: "center"}}>
                            <div style={{marginTop: "5px",width: "100%",height: "50%",color: config.KSTColors.MAIN,fontSize: "32px",
                                display: "flex",justifyContent: "center",alignItems: "center"}}>
                                Download Template
                            </div>
                        </div>
                    </Col>
                </Row>
            </Col>
            <Modal size="lg" show={exportModalOpen} onHide = {() => setExportModalOpen(false)} aria-labelledby="VRTemplateDownload" centered>
                <Modal.Header style={{ backgroundColor: '#e6e6e6' }}>
                    <Modal.Title id="VRTemplateDownload">Export Vessel Report Template</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <span style={{fontSize: "12px"}}>Are you sure to generate {loggedInVesselName} vessel report?</span>
                </Modal.Body>
                <Modal.Footer style={{ color: '#04588e' }}>
                    <Button onClick={() => setExportModalOpen(false)} style={{ backgroundColor: 'white', color: '#04588e', paddingTop: '2px', paddingBottom: '2px', paddingLeft: '20px', paddingRight: '20px' }}>Cancel</Button>
                    <ExcelFile filename={`${loggedInVesselName}_DailyLogTemplate`} element={<Tooltip title="Export Daily Log Template" placement="bottom"><Button style={{ backgroundColor: '#04588e', color: 'white', paddingTop: '2px', paddingBottom: '2px', paddingLeft: '20px', paddingRight: '20px' }}>Daily Log</Button></Tooltip>}>
                        <ExcelSheet dataSet={generatedData} name="Daily Log" />
                    </ExcelFile>
                </Modal.Footer>
            </Modal>
        </Container>
    );
};

export default withMessageManager(VesselReportExcelGenerator);
vcirk6k6

vcirk6k63#

你应该研究更多的编程方法,比如python上的pandas库中的方法。

相关问题