打印功能修改

FormInsertDiy/RenderForm/PrintForYx.js

-import React, { useEffect, useRef, useState } from "react";
-import ReactToPrint from "react-to-print";
-import styles from "./index.less";
-import { Button } from "antd";
+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';
 
 
 const idsConfig = [
   {
     id: '1427569429700411392',
-    name: "新生入学登记表",
-    key: "xsrxdjb"
+    name: '新生入学登记表',
+    key: 'xsrxdjb',
   },
   {
     id: '1427570690688548864',
-    name: "新生入学报到单",
-    key: "xsrxbdd"
+    name: '新生入学报到单',
+    key: 'xsrxbdd',
   },
 ];
 
@@ -23,32 +23,62 @@ export default function PrintQnmz(props) {
   const [showPrint, setShowPrint] = useState(false);
   console.log(window.history);
   useEffect(() => {
-    document.title = "新手报到单打印";
+    document.title = '新手报到单打印';
     setTimeout(() => {
       setShowPrint(true);
-    }, 1000);
+    }, 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}>
+    <div className={styles.buttonDiv} id={'showButtonDiv'}>
+      {/* {
+        showPrint ? <Button type={"primary"} onClick={printDom}>打印</Button> : <div>正在加载打印信息, 请稍等</div>
+      }
+      */}
       {
-      showPrint && <ReactToPrint
-        trigger={() => <Button type={"primary"}>打印</Button>}
+        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={() => {
+        <Button type={'danger'} onClick={() => {
           window.history.go(-1);
         }}>返回</Button>
       }
+
+
     </div>
     <div ref={componentRef}>
       {
         idsConfig.map((x) => {
           return (
-            <div style={{minHeight: '29cm'}}>
-            <IframeForRenderForm id={x.id} {...props}/>
+            <div style={{
+              minHeight: '29cm',
+              minWidth: '21cm',
+              pageBreakAfter: 'always',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}>
+              <IframeForRenderForm id={x.id} {...props} />
             </div>
           );
         })

FormInsertDiy/RenderForm/index.less

@@ -24,3 +24,9 @@
   padding: 10px;
   justify-content: center;
 }
+@media print{
+  table{
+    //min-width: 19cm !important;
+    //min-height: 25cm !important;
+  }
+}