index.jsx

import React, {
  useState,
  useImperativeHandle,
  forwardRef,
  useRef,
} from "react";
import styles from "./index.less";
import { QRCodeSVG } from "qrcode.react";
const pageStyle = `
@media all {
    .page-break {
    display: none;
    }
}

@media print {
    html, body {
    height: initial !important;
    overflow: initial !important;
    position:relative;
    -webkit-print-color-adjust: exact;
    word-break: break-all;
    }

}

@media print {
    .page-break {
    margin-top:0;
    display: block;
    page-break-before: auto;
    }
}

@media print {
    .page-noprint {
        display: none !important;
    }
}

@page {
    size: auto;
    margin: 0px;
}
`;

let PrintQrCode = forwardRef(({ selectedItems }, ref) => {
  let printRef = useRef();
  useImperativeHandle(ref, () => ({
    dom: printRef,
  }));

  return (
    <>
      <style type="text/css" media="print">
        {pageStyle}
      </style>
      <div className={styles.qrcode} ref={printRef}>
        {selectedItems.map((item, i) => {
          return (
            <div key={item.id}>
              <ul>
                <li>
                  <p>
                    <b>物料编码: </b> <span>{item.materieCode}</span>
                  </p>
                  <p>
                    <b>物料名称: </b> <span>{item.materieName}</span>
                  </p>
                  <p>
                    <b>批次号: </b> <span>{item.materieControlNo}</span>
                  </p>
                  <p>
                    <b>供应商: </b> <span>{item.supplierName}</span>
                  </p>
                </li>
                <li>
                  <QRCodeSVG value={item.id} size={350}></QRCodeSVG>
                </li>
              </ul>
              <span className="page-break"></span>
            </div>
          );
        })}
      </div>
    </>
  );
});

export { PrintQrCode };