修改打印模板

src/pages/Printer/index.jsx

@@ -100,8 +100,8 @@ const Station = (props) => {
         key: "qrCodeUrl ",
         search: false,
         render: (_, row) => {
-          return  <Image src={row?.qrCodeUrl} width={30} height={30} ></Image>
-        }
+          return <Image src={row?.qrCodeUrl} width={30} height={30}></Image>;
+        },
       },
       {
         title: "创建人",
@@ -237,6 +237,44 @@ const Station = (props) => {
     });
   };
 
+  const [data, setdata] = useState({});
+
+  useEffect(() => {
+    let el = document.getElementById("mydemo");
+    el.innerHTML = ` <div>
+    <div style="display:flex; width:100% ;height:100%; flex-direction: column;justify-self: space-between; font-family:'宋体'">
+<div style="display:flex; flex-direction: row;flex:2;">
+  <div style="display:flex;flex-direction: column;flex:2">
+    <div style="flex:1">卷料名称：${data?.materieName ?? "--"}</div>
+    <div style="flex:1">卷料编码：${data?.materieCode ?? "--"}</div>
+  </div>
+</div>
+<div style="display:flex; flex-direction: row;flex:1;">
+ <div style="flex:3;display:flex;flex-direction: row;">
+   <div style="flex:1">批次：${data?.materieControlNo ?? "--"}</div>  
+   <div style="flex:1">厚度：${data?.unilateralThickness ?? "--"}mm</div>
+ </div>
+ <div style="flex:1">
+ <img src=${data?.qrCodeUrl} style="width:100%"/>
+ </div>
+</div>
+<div style="display:flex; flex-direction: row;flex:1;">
+  <div style="flex:2">铁损：${data?.ironLoss ?? "--"}w/kg</div>
+  <div style="flex:3">牌号：${data?.shopSign ?? "--"}片</div>
+</div>
+<div style="display:flex; flex-direction: row;flex:1;">
+<div style="flex:2">宽度：${data?.width ?? "--"}mm</div>
+  <div style="flex:3">片厚：${data?.sheetThickness ?? "--"}mm</div>
+</div>
+<div style="display:flex; flex-direction: row;flex:1;">
+<div style="flex:2">重量：${data?.weight ?? "--"}KG</div>
+  <div style="flex:3">米数：${data?.length ?? "--"}M</div>
+</div>
+
+</div>
+    </div>`;
+  }, []);
+
   const OptionsBtn = () => {
     return (
       <>
@@ -287,6 +325,7 @@ const Station = (props) => {
           ...rowSelection,
         }}
       ></AutoTable>
+      <div id="mydemo" style={{width:500,height:250,border:'1px solid #000',backgroundColor:'#fff'}}></div>
       <Drawer
         title={drawer?.title}
         open={drawer?.visible}

src/utils/mymodelhtml.js

@@ -44,18 +44,11 @@ export function str(data) {
   // </table>`;
 
   return ` <div style="display:flex; width:100% ;height:100%; flex-direction: column;justify-self: space-between; font-family:'宋体'">
-  <div style="display:flex; flex-direction: row;flex:2;">
-    <div style="display:flex;flex-direction: column;flex:2">
-      <div style="flex:1">卷料名称：${data?.materieName ?? "--"}</div>
-      <div style="flex:1">卷料编码：${data?.materieCode ?? "--"}</div>
-    </div>
-  </div>
+  
   <div style="display:flex; flex-direction: row;flex:2;">
    <div style="flex:3;display:flex;flex-direction: column;">
      <div style="flex:1">批次：${data?.materieControlNo ?? "--"}</div>  
-     <div style="flex:1">单边卷料厚度：${
-       data?.unilateralThickness ?? "--"
-     }mm</div>
+     <div style="flex:1">重量：${data?.weight ?? "--"}KG</div>
    </div>
    <div style="flex:1">
    <img src=${data?.qrCodeUrl} style="width:100%"/>
@@ -63,16 +56,21 @@ export function str(data) {
   </div>
   <div style="display:flex; flex-direction: row;flex:1;">
     <div style="flex:2">铁损：${data?.ironLoss ?? "--"}w/kg</div>
-    <div style="flex:3">牌号：${data?.shopSign ?? "--"}片</div>
+    <div style="flex:3">米数：${data?.length ?? "--"}M</div>
   </div>
   <div style="display:flex; flex-direction: row;flex:1;">
   <div style="flex:2">宽度：${data?.width ?? "--"}mm</div>
     <div style="flex:3">片厚：${data?.sheetThickness ?? "--"}mm</div>
   </div>
   <div style="display:flex; flex-direction: row;flex:1;">
-  <div style="flex:2">数量：${data?.weight ?? "--"}KG</div>
-    <div style="flex:3">米数：${data?.length ?? "--"}M</div>
+  <div style="flex:2">厚度：${data?.unilateralThickness ?? "--"}mm</div>
+    <div style="flex:3">牌号：${data?.shopSign ?? "--"}片</div>
+  </div>
+  <div style="display:flex; flex-direction: row;flex:2;">
+    <div style="display:flex;flex-direction: column;flex:2">
+      <div style="flex:1">卷料名称：${data?.materieName ?? "--"}</div>
+      <div style="flex:1">卷料编码：${data?.materieCode ?? "--"}</div>
+    </div>
   </div>
-  
 </div>`;
 }

src/utils/printHandle.js

@@ -26,7 +26,7 @@ export async function start(url, params) {
         let LODOP = getLodop();
         LODOP.PRINT_INIT("task1");
         LODOP.ADD_PRINT_HTM(0, 0, "100%", "100%", template);
-        LODOP.SET_PRINT_PAGESIZE(0, 800, 600, "");
+        LODOP.SET_PRINT_PAGESIZE(0, 1000, 500, "");
         // LODOP.PREVIEW();
         LODOP.PRINT();
       }