我正在使用react-data-export导出我的react项目中的excel工作表。我需要在单个文件中导出两个excel数据。示例
如果不可能的上述模块,请建议我一个新的方法来做到这一点。
jaql4c8m1#
我已经发布了一个simple proof of concept,它应该是有用的,以了解如何有可能满足需求的问题,以出口两个excel数据在一个文件。x1c 0d1x在**ExcelSheet组件中,可以传递一个dataSet,它允许任意数量的数据表和其他特性,例如列标题和数据表与后续数据表之间的行和列偏移量。
ExcelSheet
dataSet
data
在react-data-exportgit repo中也有一个simple_excel_export_02的例子,但我还没能让它工作,还有一个open issue,里面有我为我的POC学到的一些建议。
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);
vcirk6k63#
你应该研究更多的编程方法,比如python上的pandas库中的方法。
3条答案
按热度按时间jaql4c8m1#
我已经发布了一个simple proof of concept,它应该是有用的,以了解如何有可能满足需求的问题,以出口两个excel数据在一个文件。
x1c 0d1x在**
ExcelSheet
组件中,可以传递一个dataSet
,它允许任意数量的数据表和其他特性,例如列标题和数据表与后续数据表之间的行和列偏移量。ExcelSheet
的data
属性用于一个数据表。ExcelSheet
的dataSet
属性用于一个或多个数据表在react-data-exportgit repo中也有一个simple_excel_export_02的例子,但我还没能让它工作,还有一个open issue,里面有我为我的POC学到的一些建议。
km0tfn4u2#
这是我的解决方案。
ExcelSheet内部有一个名为dataSet的属性。它用于生成数据到我们的Excel。因此,您可以将多个数据添加到dataSet。请参阅下面的代码。在这里,我使用名为generatedData的字段,其中包含Excel的行和列。因此,您可以在单个Excel工作表中添加数组内的多个数据对象。结果将完全符合您上面的要求
vcirk6k63#
你应该研究更多的编程方法,比如python上的pandas库中的方法。