import React, { useEffect, useRef, useState } from 'react'; import ReactToPrint from 'react-to-print'; import styles from './index.less'; import { Button } from 'antd'; import IframeForRenderForm from './IframeForRenderForm'; import { setToken } from '@/utils/authority'; const idsConfig = [ { id: '1427569429700411392', name: '新生入学登记表', key: 'xsrxdjb', }, { id: '1427570690688548864', name: '新生入学报到单', key: 'xsrxbdd', }, ]; export default function PrintQnmz(props) { const componentRef = useRef(); const [showPrint, setShowPrint] = useState(false); useEffect(() => { document.title = '新手报到单打印'; setTimeout(() => { setShowPrint(true); }, 2000); }, []); // function printDom() { // document.getElementById('showButtonDiv').style.display = 'none'; // window.print(); // setTimeout(() => { // document.getElementById('showButtonDiv').style.display = 'grid'; // }, 1000); // } return (<div> <div className={styles.buttonDiv} id={'showButtonDiv'}> {/* { showPrint ? <Button type={"primary"} onClick={printDom}>打印</Button> : <div>正在加载打印信息, 请稍等</div> } */} { showPrint ? <ReactToPrint trigger={() => <Button type={'primary'}>打印</Button>} content={() => componentRef.current} onBeforePrint={() => { return new Promise((resolve, reject) => { setTimeout(() => { resolve(true); }, 2000); }); }} /> : <div>正在加载打印信息, 请稍等</div> } { showPrint && window.history.length > 1 && <Button type={'danger'} onClick={() => { window.history.go(-1); }}>返回</Button> } { showPrint && window.history.length > 1 && <Button type={'danger'} onClick={() => { setToken(''); window.location.reload(); }}>清空缓存</Button> } </div> <div ref={componentRef}> { idsConfig.map((x) => { return ( <div style={{ minHeight: '29cm', minWidth: '21cm', pageBreakAfter: 'always', display: 'flex', justifyContent: 'center', alignItems: 'center', }}> <IframeForRenderForm id={x.id} {...props} /> </div> ); }) } </div> </div>); }