在react中实现局部页面打印功能

丶酸酸

已于 2022-07-05 10:42:29 修改

阅读量2.3k

点赞数

分类专栏： react 打印功能文章标签： react 云打印

于 2020-08-21 17:19:34 首次发布

本文链接：https://blog.csdn.net/a82048195/article/details/108150840

版权

在遇到使用window.print()导致页面出现bug并影响用户体验的问题时，本文提出了使用iframe来解决React应用中的局部打印需求。通过iframe，可以避免页面刷新，并详细介绍了如何设置打印区域的样式、去除页眉页脚以及实现内容分页。

摘要由CSDN通过智能技术生成

最近遇到了打印页面的问题。

使用window.print()打印，取消打印页面，页面会出现bug，需要用window.reload()重新加载一下页面，用户体验很差。

1.为了解决该问题，可以使用iframe的方式解决：（但是设置打印区域样式是个问题，只能写行内样式）

代码：

//确认打印
  printOk() {
   
  //获取打印区域
    const printDiv= document.getElementById('printDiv');
    const iframe =

关注

专栏目录