react + antd 实现打印功能（踩了不少坑）

最新推荐文章于 2025-06-28 09:10:21 发布

转载

最新推荐文章于 2025-06-28 09:10:21 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jlj9520/p/10212447.html

文章标签：

#javascript #前端 #ViewUI

在React项目中实现打印功能时遇到了困难，包括window.print()样式丢失、用户交互不佳以及二维码打印问题。文章介绍了通过iframe解决样式问题，以及如何处理canvas二维码转为图片以确保正常打印的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在有网页打印需求，尝试了一下react的打印功能，遇到了不少的坑：

1.react本身有一些打印的组件，但都不好用，都是基于window.print()，但是window.print()如果直接打印的话，没有样式。处理直接当前网页的body设置为你要打印的区域，但是当你取消打印的时候你会发现整个网页都被你要打印的区域占满了，你还得用window.reload()重新加载一下页面，用户交互很不好，建议不要采用这种方式。

2.样式的问题，我们可以通过写内联样式解决，尝试了react的react-inline-css也没试成功。所以，当你页面有打印功能时，打印的区域最好是用内联样式完成。

3.为了解决1中提到的用户交互问题，可以使用iframe的方式解决，具体单面如下：

print=(id)=>{
        const el = document.getElementById(id);
        const iframe = document.createElement('IFRAME');
        let doc = null;
        iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:500px;top:500px;');
        document.body.appendChild(iframe);
        doc =