react调用打印机自定义样式

react-to-print 实现打印样式
qrcode.react 实现二维码

  // 订单小票打印样式
  const printRender = () => {
    return (
      <div
        className="printWrap"
        style={{position: 'absolute', bottom: '-19px', right: 50, left: '-9999999px', zIndex: -1}}
      >
        <div ref={contentRef} className="Print">
          {printList.map((item: any, index: any) => {
            return (
              <div
                key={index}
                style={{
                  width: '70mm',
                  height: `210mm`,
                }}
                className="print-area"
              >
                <div className="text-[28px] font-border text-center mb-[5px]">#{item.serialNo}订单</div>
                <div className="line"></div>
                <div className="line mb-[5px]"></div>
                <div className="mb-[5px] text-[15px]">存件码{item.storageCode}</div>
                <div className="line mb-[5px]"></div>
                <div className="mb-[5px]">备注：{item.remark}</div>
                <div className="flex justify-between align-center mb-[5px]">
                  <div className="w-[60%]">名称</div>
                  <div className="w-[20%] text-center">数量</div>
                  <div className="w-[20%]  text-right">金额</div>
                </div>
                <div className="line mb-[5px]"></div>
                {item?.orderProductList?.map((j, i) => {
                  return (
                    <div key={i}>
                      <div className="flex justify-between align-center mb-[5px]">
                        <div className="w-[60%]">{j.productName}</div>
                        <div className="w-[20%] text-center">{j.quantity}</div>
                        <div className="w-[20%] text-right">{j.totalPrice}</div>
                      </div>
                      {item.attribute && (
                        <div className="flex justify-between align-center ml-[2em] mb-[5px]">属性 {j.attribute}</div>
                      )}
                    </div>
                  );
                })}

                <div className="line mb-[5px]"></div>
                <div className="flex justify-between align-center mb-[5px]">
                  <div className="w-[60%]">商品合计</div>
                  <div className="w-[20%] text-center">{item.productQuantity}</div>
                  <div className="w-[20%] text-right">{item.orderAmount}</div>
                </div>
                <div className="line mb-[5px]"></div>
                {item.couponRuleExplanation && (
                  <div className="flex justify-between align-center mb-[5px]">
                    <div>{item.couponRuleExplanation}</div>
                    <div>-{item.discountAmount || 0}</div>
                  </div>
                )}
                <div className="line mb-[5px]"></div>
                <div className="flex justify-between align-center mb-[5px]">
                  <div>客户姓名</div>
                  <div>{maskName(item.studentName)}</div>
                </div>
                <div className="flex justify-between align-center mb-[5px]">
                  <div>联系电话</div>
                  <div>{maskPhone(item.paymentAccount)}</div>
                </div>
                <div className="flex justify-between align-center mb-[5px]">
                  <div className="mr-[5px]">送货地址</div>
                  <div className="flex-1 text-right">{item.deliveryAddress}</div>
                </div>
                <div className="QRCode text-center mb-[5px]">
                  <div className="QRCodeBox">
                    <QRCode value={item.storageCode} size={120} id="qrCode" />
                  </div>
                  <div className="QRCodeDes text-center">对准云校柜扫描枪存件</div>
                </div>
                <div className="flex justify-between align-center mb-[5px]">
                  <div>客服热线</div>
                  <div>4000967111</div>
                </div>
                <div className="line mb-[5px]"></div>
                <div className="mb-[5px]">订单号:{item.orderNo}</div>
                <div>下单时间：{moment(item.createdAt).format('YYYY年MM月DD HH:mm:ss')}</div>
                <div style={{height: '15mm'}}></div>
                <div>.</div>
              </div>
            );
          })}
        </div>
      </div>
    );
  };

import QRCode from 'qrcode.react';
import {useReactToPrint} from 'react-to-print';  
const contentRef = useRef<HTMLDivElement>(null); 
 const reactToPrintFn = useReactToPrint({
    contentRef,
    removeAfterPrint: true,
    pageStyle: `@page { size: 70mm 210mm`,
  });
// 调用：    reactToPrintFn();

效果预览