前言

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 + 20
            if (_end <= 100) {
                setEnd(()=>{
                    return _end
                })
                    reactToPrintFn()
            }
}

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

第一组： 

 

第二组： 

以此类推，直到打印完成 

最后

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