打印页面宽高设置

zyd_private/DragAndPrint/ViewPrint/index.js

-
-
 import React, { Component, Fragment } from 'react';
 import { queryConfig } from '../services';
 import { getInfo } from '@/highOrderComponent/Service';
@@ -25,7 +23,7 @@ export default class ViewPrint extends Component {
   }
 
   countImageHeight = () => {
-    if(!this.state.configAll){
+    if (!this.state.configAll) {
       return false;
     }
     const {
@@ -75,12 +73,12 @@ export default class ViewPrint extends Component {
     } = this.state;
     const res = [];
     for (const item of config) {
-        res.push(
-          DetailDom({
-            config: item,
-            data: data[item.fieldCode],
-          }),
-        );
+      res.push(
+        DetailDom({
+          config: item,
+          data: data[item.fieldCode],
+        }),
+      );
     }
     return res;
   };
@@ -125,11 +123,15 @@ export default class ViewPrint extends Component {
     if (!viewData || !minHeight) {
       return null;
     }
-    if(!configAll.backgroundUrl){
+    if (!configAll.backgroundUrl) {
       console.error('没有设置模版图片无法使用');
       return null;
     }
-    const { hasPrintBackground, backgroundUrl } = configAll;
+    const { hasPrintBackground, backgroundUrl, wide, high } = configAll;
+    const imageStyle = {
+      height: high || '902px',
+      width: wide || 'auto',
+    };
     return (
       <Fragment>
         <Shell styleShell={{ marginTop: '0', marginBottom: '20px' }}>
@@ -169,12 +171,19 @@ export default class ViewPrint extends Component {
               return (
                 <div className={styles.outSideDivPrint}
                      key={index + 'divKey'}
+                     style={{
+                       ...imageStyle,
+                     }}
                 >
                   <img
                     src={backgroundUrl}
                     draggable={false}
                     className={styles.bgimagePrint}
                     alt={'背景图'}
+                    style={{
+                      width: 'auto',
+                      height: '100%',
+                    }}
                   />
                   {this.detailDom(info)}
                 </div>
@@ -188,31 +197,33 @@ export default class ViewPrint extends Component {
           <div
             ref={(node) => (this.content = node)}
             style={{
-              display: showWindowPrint ? 'block' : 'none',
+              display: showWindowPrint || true ? 'block' : 'none',
             }}>
-            {!showWindowPrint
-              ? null
-              : viewData.map((info, index) => {
-                return (
-                  <div
-                    className={styles.outSideDivPrint}
-                    key={`${index}divKey`}
-                    style={{
-                      minHeight: minHeight || 700,
-                    }}>
-                    {hasPrintBackground ? (
-                      <img
-                        src={backgroundUrl}
-                        draggable={false}
-                        className={styles.bgimagePrint}
-                        alt={'背景图'}
-                      />
-                    ) : null}
+            {viewData.map((info, index) => {
+              return (
+                <div
+                  className={styles.outSideDivPrint}
+                  key={`${index}divKey`}
+                  style={{
+                    ...imageStyle,
+                  }}
+                >
+                  {hasPrintBackground ? (
+                    <img
+                      src={backgroundUrl}
+                      draggable={false}
+                      className={styles.bgimagePrint}
+                      alt={'背景图'}
+                      style={{
+                        width: 'auto',
+                        height: '100%',
+                      }}    />
+                  ) : null}
 
-                    {this.detailDom(info)}
-                  </div>
-                );
-              })}
+                  {this.detailDom(info)}
+                </div>
+              );
+            })}
           </div>
         ) : null}
       </Fragment>

zyd_private/DragAndPrint/index.less

@@ -24,7 +24,7 @@
 }
 .outSideDivPrint{
   position: relative;
-  width: 100%;
+  width: auto;
   margin-bottom: 10px;
   page-break-after: always;
   .bgimagePrint{