批量打印的趣事

前言

PC端网页打印大量数据的时候，比如批量打印100个标签，会出现打印样式混乱的问题

问题

数据可以设定100~自定义阈值

{data.map((_, idx) => {return <Tag qrCode='啊程是个大帅逼' code={`AB-${idx+1}`} title='雷猴' key={idx} />})}

打印预览到第32个已经出现元素重叠，页面没有这种问题

 

 解决

做数据切割，多次打印

 {data.slice(end - 20, end).map((_, idx) => {return <Tag qrCode='啊程是个大帅逼' code={`AB-${idx+1}`} title='雷猴' key={idx} />})}

切分算法，每次只打印20个，符合常规页码规则，打印完再打印下一组直到打印完成

        const calculate = ()=>{const _end = end + 20if (_end <= 100) {setEnd(()=>{return _end})reactToPrintFn()}
}

const reactToPrintFn = usePrint({content: () => contentRef.current,onAfterPrint: () => {calculate()}});

第一组： 

 

第二组： 

以此类推，直到打印完成 

最后

这种方式的缺点就是要多次点击打印来关闭弹窗，若采用静默打印则没有这种问题，相反就没办法进行预览查看☺️！