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>批次号/SN号: </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 };