打印奖状变成bs打印 需要下载一个应用程序

zyd_private/DragAndPrint/ViewPrint/DetailDom.js

@@ -138,13 +138,17 @@ export default function DetailDom({ config, data }) {
   const outSideDom = (children) => {
     return (
       <div
-        className={styles.inSideItemPrint}
-        key={`filed${config.id}`}
         style={{
+          position: 'absolute',
+          zIndex: 10,
+          paddingLeft: '10px',
+          paddingRight: '10px',
+          fontWeight: 'bold',
           left: x + 'px',
           top: y + 'px',
           transform: transform ? `rotate(${transform}deg)` : 'none',
-        }}>
+        }}
+        key={`filed${config.id}`}>
         {children}
       </div>
     );

zyd_private/DragAndPrint/ViewPrint/config.js

+import { message } from 'antd';
+import { ModalConfirm, ModalInfo } from '@/baseComponent/Modal';
+
 export const A4Height = '29.6cm';
 export const A4Width = '20.9cm';
 export const imageStyleAll = {
   width: '100%',
   height: '100%',
 };
+
+export function getCLodopFuncJS() {
+  return new Promise((resolve, reject) =>{
+    if(window.LODOP){
+      console.log('打印插件加载成功');
+      resolve(true);
+      return true;
+    }
+    let sc = document.createElement('script');
+    sc.src = `http://localhost:18000/CLodopFuncs.js`;
+    document.querySelector('body').appendChild(sc);
+    sc.onload = function() {
+      resolve(true);
+      console.log('打印插件加载成功');
+    };
+    sc.onerror = function() {
+      resolve(false);
+      ModalConfirm('请下载并运行打印控件后刷新本页面继续打印！' +
+        '点击确定进行控件下载', {
+        title: '未获取到打印控件',
+        onOk: () => {
+          window.open('/CLodop_32_Print.zip');
+        },
+      });
+    };
+  });
+
+}

zyd_private/DragAndPrint/ViewPrint/index.js

@@ -82,18 +82,6 @@ export default class ViewPrint extends Component {
 
   componentDidMount() {
     this.getViewData();
-    if (window.matchMedia) {
-      const mediaQueryList = window.matchMedia('print');
-      console.log(mediaQueryList);
-      mediaQueryList.addListener(function(mql) {
-        if (mql.matches) {
-          this.beforePrint();
-        } else {
-          this.afterPrint();
-        }
-      });
-
-    }
   }
 
   detailDom = (data) => {

zyd_private/DragAndPrint/ViewPrint/index2.js

+import React, { Component, Fragment } from 'react';
+import { queryConfig } from '../services';
+import { getInfo } from '@/highOrderComponent/Service';
+import { message, Button } from 'antd';
+import Shell from '@/baseComponent/Shell';
+import ReactToPrint from 'react-to-print';
+import ButtonDiy from '@/baseComponent/ButtonDiy';
+import router from 'umi/router';
+import styles from '../index.less';
+import DetailDom from './DetailDom';
+import { imageStyleAll, A4Width, A4Height, getCLodopFuncJS } from './config';
+
+export default class ViewPrint extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      configAll: null,
+      viewData: null,
+      loading: true,
+      minHeight: 0,
+      showWindowPrint: false,
+    };
+    this.getConfigInfo = queryConfig.bind(this);
+  }
+
+  countImageHeight = () => {
+    if (!this.state.configAll) {
+      return false;
+    }
+    const {
+      configAll: { backgroundUrl },
+    } = this.state;
+    const img = new Image();
+    img.src = backgroundUrl;
+    img.onload = () => {
+      this.setState({
+        minHeight: img.height,
+      });
+    };
+  };
+
+  getViewData = () => {
+    const { selectedRows } = this.props;
+    const ids = selectedRows.map((x) => x.id);
+    this.getConfigInfo().then((x) => {
+      this.countImageHeight();
+      if (x && x.queryUrl) {
+        getInfo(
+          {
+            ids: ids.join(','),
+          },
+          x.queryUrl,
+        ).then((viewData) => {
+          if (!viewData || !viewData.length) {
+            message.warning('未查询到可打印的奖状数据');
+            console.error(`${x.queryUrl}接口报错或者没有返回数据`);
+            return false;
+          }
+          for (const item of viewData) {
+            for (let z in item) {
+              if (item[z] === null || item[z] === 'null') {
+                item[z] = '';
+              }
+            }
+          }
+          this.setState({
+            viewData,
+          });
+        });
+      }
+    });
+  };
+
+
+  beforePrint = () => {
+    console.log('beforePrint');
+  };
+
+  afterPrint = () => {
+    console.log('afterPrint');
+  };
+
+  componentDidMount() {
+    this.getViewData();
+    getCLodopFuncJS().then((response) => {
+      if (response) {
+        this.setState({
+          loading: false,
+        });
+      }
+    });
+  }
+
+  detailDom = (data) => {
+    const {
+      configAll: { config },
+    } = this.state;
+    const res = [];
+    for (const item of config) {
+      res.push(
+        DetailDom({
+          config: item,
+          data: data[item.fieldCode],
+        }),
+      );
+    }
+    return res;
+  };
+
+  onBeforeGetContent = () => {
+    this.setState({
+      loading: true,
+    });
+
+    return new Promise((resolve, reject) => {
+      const { selectedRows } = this.props;
+      const { configAll } = this.state;
+
+      if (configAll.callUrl && false) {
+        const ids = selectedRows.map((x) => {
+          return x.id;
+        });
+        // 暂时关闭调用这个接口 不通知后台是否打印了
+        getInfo({ ids: ids.join(',') }, configAll.callUrl).then((x) => {
+          if (x) {
+            this.setState({ showWindowPrint: true }, () => {
+              resolve(true);
+            });
+          } else {
+            resolve(true);
+          }
+        });
+      } else {
+        this.setState({ showWindowPrint: true }, () => {
+          resolve(true);
+        });
+      }
+    });
+  };
+
+  printByLodop = () => {
+    const { configAll } = this.state;
+    const { hasPrintBackground, backgroundUrl, wide, high } = configAll;
+
+    this.setState({
+      showWindowPrint: true,
+    }, () => {
+      let strHTML = this.content.innerHTML;
+      window.LODOP.PRINT_INIT('');
+      //  window.LODOP.PRINT_INITA(1, 1, 770, 660, '测试预览功能');
+      //     window.LODOP.ADD_PRINT_TEXT(10, 60, 300, 200, '这是测试的纯文本，下面是超文本:');
+      window.LODOP.ADD_PRINT_HTM(0, 0, `${wide}cm`, `${high}cm`, strHTML);
+      window.LODOP.PREVIEW();
+      window.LODOP.On_Return = function(TaskId, Value) {
+        console.log(TaskId, Value);
+        if (Value === '1' || Value === 1) {
+          alert('已发出实际打印命令！');
+        }
+        else {
+          alert('放弃打印！');
+        }
+      };
+    });
+  };
+
+  render() {
+    const {
+      loading,
+      configAll,
+      viewData,
+      showWindowPrint,
+      minHeight,
+    } = this.state;
+    if (!viewData || !minHeight) {
+      return null;
+    }
+    if (!configAll.backgroundUrl) {
+      console.error('没有设置模版图片无法使用');
+      return null;
+    }
+    const { hasPrintBackground, backgroundUrl, wide, high } = configAll;
+    const imageStyle = {
+      height: `${high}cm` || A4Height,
+      width: `${wide}cm` || A4Width,
+    };
+
+    return (
+      <Fragment>
+        <Shell styleShell={{ marginTop: '0', marginBottom: '20px' }}>
+          <div style={{ height: '54px', padding: '12px 0 12px 12px' }}>
+            <ButtonDiy name={'打印'}
+                       handleClick={this.printByLodop}
+            />
+            {/* <ReactToPrint
+              trigger={() => (
+                <Button
+                  shape="round"
+                  type="primary"
+                  loading={loading}
+                  style={{ marginRight: '20px' }}>
+                  打印
+                </Button>
+              )}
+              content={() => this.content}
+              onBeforeGetContent={this.onBeforeGetContent}
+              onAfterPrint={() => {
+                this.setState({
+                  showWindowPrint: false,
+                  loading: false,
+                });
+              }}
+            />*/}
+            <ButtonDiy
+              name={'返回'}
+              handleClick={() => {
+                router.goBack();
+              }}
+            />
+          </div>
+        </Shell>
+
+        {/** 预览的dom **/}
+        {viewData && viewData.length ? (
+          <div>
+            {viewData.map((info, index) => {
+              return (
+                <div
+                  className={styles.outSideDivPrint}
+                  key={index + 'divKey'}
+                  style={{
+                    ...imageStyle,
+                  }}>
+                  <img
+                    src={backgroundUrl}
+                    draggable={false}
+                    className={styles.bgimagePrint}
+                    alt={'背景图'}
+                    style={imageStyleAll}
+                  />
+                  {this.detailDom(info)}
+                </div>
+              );
+            })}
+          </div>
+        ) : null}
+
+        {/**  打印的dom */}
+        {viewData && viewData.length ? (
+          <div
+            ref={(node) => (this.content = node)}
+            style={{
+              display: showWindowPrint ? 'block' : 'none',
+            }}>
+            {viewData.map((info, index) => {
+              return (
+                <div
+                  key={`${index}divKey`}
+                  style={{
+                    position: 'relative',
+                    width: 'auto',
+                    pageBreakAfter: 'always',
+                    ...imageStyle,
+                  }}>
+                  {hasPrintBackground && false ? (
+                    <img
+                      src={backgroundUrl}
+                      draggable={false}
+                      alt={'背景图'}
+                      style={{
+                        height: 'auto',
+                        overflow: 'auto',
+                        zIndex: 1,
+                        ...imageStyleAll,
+                      }}
+                    />
+                  ) : null}
+
+                  {this.detailDom(info)}
+                </div>
+              );
+            })}
+          </div>
+        ) : null}
+      </Fragment>
+    );
+  }
+}