我正在使用react-data-export库下载我的数据到excel.它的工作正常.但我有要求下载多个excel文件在一个点击.检查官方文档也,没有提到关于这一点.下面的代码工作正常的单个excel文件下载FYR.也有要求压缩这些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();
const loggedInVesselName = JSON.parse(localStorage.getItem('selectedVessel'))?.name;
var generatedData = [
{
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);
1条答案
按热度按时间n9vozmp41#
我搜索了一下,没有办法用react-data-export库下载多个excel文件。所以我做了一些黑客使用useRef钩子来实现这一点。
下面的代码FYR。干杯!!!