前言:react中一般生成二维码都是用react.qrcode,但是发现这玩意生成的是canvas,不是图片,打印的时候预览不出来。所以想进一切办法去把canvas转成图片,无奈拿不到这个canvas标签。最后还是用js的qrcode来生成二维码,这样生成的默认是base64位的图片,打印正常。
使用到的两个组件:
1、生成二维码
javascript
yarn add qrcode
2、打印
javascript
yarn add react-print-html
参考代码(部分代码,不可直接粘贴运行)
javascript
import { Button, Modal, Table, TableProps } from 'antd';
import { useRef, useState } from 'react';
import Print from 'react-print-html'
let QRCode = require('qrcode')
export default (props: PropsType) => {
const { children } = props;
const intl = useIntl();
let printTemp = useRef(null)
const formRef = useRef<ProFormInstance>();
const [routingList, setRoutingList] = useState<TableDataType[]>([]);
const [tableLoading, setTableLoading] = useState<boolean>(false);
const [qrcodeImg, setQrcodeImg] = useState(undefined)
const getCode =(lotNo: string) =>{
QRCode.toDataURL(lotNo)
.then((url: any) => {
setQrcodeImg(url)
})
.catch((err: any) => {
console.error(err)
})
}
const getList = async () => {
const res: any = await request({});
if (res.data?.lot?.length) {
setRoutingList(res.data.lot);
getCode(res.data.lot[0].lotNo)
} else {
setRoutingList([])
}
setTableLoading(false);
};
const handlePrint = () => {
setTimeout(() => {
Print(printTemp.current)
})
};
return (
<>
<div
style={{ display: 'inline-block' }}
onClick={() => {
setIsModalOpen(true);
// getList();
}}
>
{children}
</div>
<Modal
open={isModalOpen}
title={children}
width="60%"
onCancel={() => {
setIsModalOpen(false);
formRef.current?.resetFields();
}}
footer={null}
>
<ProForm>
<ProFormItem>
<Button type="primary" danger onClick={handlePrint} style={{ marginLeft: 20 }} disabled={!routingList.length}>
{intl.formatMessage({
id: 'component.option.print',
defaultMessage: '打印',
})}
</Button>
</ProFormItem>
</ProForm>
<div ref={printTemp}>
{routingList.map((item) => {
return (
<div key={item.id} style={{ marginTop: 30}}>
<div style={{display: 'inline-block', verticalAlign: 'middle'}}>
<img src={qrcodeImg} style={{width:"100px",height:"100px"}}></img>
</div>
<div style={{display: 'inline-block', verticalAlign: 'middle'}}>
<div>
{intl.formatMessage({
id: 'component.option.productionOrder.table.lotNo',
defaultMessage: '号码一',
})}: {item.lotNo}</div>
<div>
{intl.formatMessage({
id: 'component.option.part.table.drawingNo',
defaultMessage: '号码二',
})}: {item.drawingNo}</div>
<div>
{intl.formatMessage({
id: 'component.option.workOrder.table.productionOrderNo',
defaultMessage: '号码三',
})}: {item.productionOrderNo}</div>
</div>
</div>
)
})}
</div>
</Modal>
</>
);
};
补充说明几点:
- QRCode.toDataURL(lotNo) 其中的lotNo参数是二维码的内容
实现效果: