当前位置：首页 > news >正文

react调用打印机自定义样式

news 2025/7/4 17:16:54

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

  // 订单小票打印样式const printRender = () => {return (<divclassName="printWrap"style={{position: 'absolute', bottom: '-19px', right: 50, left: '-9999999px', zIndex: -1}}><div ref={contentRef} className="Print">{printList.map((item: any, index: any) => {return (<divkey={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();

效果预览