关于React中使用window.print()出现页面无响应问题解决记录

更新时间：2021年11月11日 16:46:56 作者：与诸君共勉

这篇文章主要介绍了React中使用window.print()出现页面无响应问题解决记录，首先问题原因可能是操作了document但是并未进行销毁（可能是），具体问题解决思路参考下本文吧

一、问题背景：

window.print()页面打印出现页面无响应

看了网上很多办法都是让用window.location.reload(),对于这个解决方案不置可否，刷新页面当然可以解决这个问题，但是不高级

二、问题原因：

可能操作了document但是并未进行销毁（可能是）

三、问题解决：

消除操作的document

封装一个printFun()方法

//该方法参数 content：需要打印的元素
printFun = (content) =>{
        var Window = window.open("", "页面打印", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no");
        var style = "<style type='text/css'></style>";
        Window.document.write(content + style);
        Window.focus();
        Window.document.close();     //关闭document的输出流, 显示选定的数据
        Window.print();               //打印当前窗口
        return Window;
    }

方法调用：billDetails是你当前想要打印的元素的 id，当然只要是能找到该元素，其他方法都可以

var windows = this.print(document.getElementById('billDetails').innerHTML);
    windows.close();

总结：

出现样式问题的需要自己将css加入进代码，就是printFun方法中的style变量，需要自己进行需求更改

到此这篇关于React中使用window.print()出现页面无响应问题解决记录的文章就介绍到这了,更多相关React使用window.print()现页面无响应内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

浅谈react性能优化的方法
这篇文章主要介绍了浅谈react性能优化的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
浅析history 和 react-router 的实现原理
react-router 版本更新非常快,但是它的底层实现原理确是万变不离其中,在本文中会从前端路由出发到 react-router 原理总结与分享,本文对history 和 react-router实现原理讲解的非常详细,需要的朋友跟随小编一起看看吧
2023-08-08
详解React中的useMemo和useCallback的区别
React中的useMemo和useCallback是两个重要的Hooks。常常被用于优化组件的性能。虽然这两个Hooks看起来很相似，但它们彼此之间还是有很大的区别的，随着小编一起来学习吧
2023-04-04
React Router 中实现嵌套路由和动态路由的示例
React Router 是一个非常强大和灵活的路由库，它为 React 应用程序提供了丰富的导航和 URL 管理功能，能够帮助我们构建复杂的单页应用和多页应用，这篇文章主要介绍了React Router 中如何实现嵌套路由和动态路由,需要的朋友可以参考下
2023-05-05
React Native中TabBarIOS的简单使用方法示例
最近在学习过程中遇到了很多问题,TabBarIOS的使用就是一个，所以下面这篇文章主要给大家介绍了关于React Native中TabBarIOS简单使用的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。
2017-10-10
React中条件渲染的常见方法总结
条件渲染在React开发中非常重要的功能,它允许开发人员根据条件控制渲染的内容,在创建动态和交互式用户界面方面发挥着至关重要的作用,本文总结了常用的的条件渲染方法,需要的朋友可以参考下
2024-01-01
详解React Angular Vue三大前端技术
当前世界中，技术发展非常迅速并且变化迅速，开发者需要更多的开发工具来解决不同的问题。本文就对于当下主流的前端开发技术React、Vue、Angular这三个框架做个相对详尽的探究，目的是为了解开这些前端技术的面纱，看看各自的庐山真面目。
2021-05-05
React实现合成事件的源码分析
React 中的事件，是对原生事件的封装，叫做合成事件。抽象出一层合成事件，是为了做兼容，抹平不同浏览器之间的差异。本文将从事件绑定和事件触发角度，带大家解读下源码，感兴趣的可以了解一下
2022-12-12
ReactNative实现弧形拖动条的代码案例
本文介绍了ReactNative实现弧形拖动条,本组件使用到了react-native-svg和PanResponder,结合示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-02-02
ReactNative页面跳转Navigator实现的示例代码
本篇文章主要介绍了ReactNative页面跳转Navigator实现的示例代码，具有一定的参考价值，有兴趣的可以了解一下
2017-08-08