关于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和Redux的连接react-redux，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了React中Props的浅对比的相关资料，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下2021-05-05
这篇文章主要介绍了React antd tabs切换造成子组件重复刷新,需要的朋友可以参考下2021-04-04
这篇文章主要介绍了react基于mobx封装管理用户登录的store,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
在React中,受控组件指的是表单元素的value值受React组件的state或props控制的组件,而非受控组件则是表单元素的value值由DOM自身负责管理的组件,本文将给大家详细介绍React受控组件与非受控组件,需要的朋友可以参考下2023-08-08
一篇文章介绍redux、react-redux、redux-saga总结
这篇文章主要介绍了一篇文章介绍redux、react-redux、redux-saga总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
这篇文章主要介绍react实现路由拦截的,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-02-02
AntDesign ,简称antd是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品,这篇文章主要介绍了Ant Design组件库的使用教程,需要的朋友可以参考下2023-12-12
本篇文章主要介绍了详解使用React进行组件库开发，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了关于react-router中的Prompt组件学习心得,Prompt组件作用是,在用户准备离开该页面时, 弹出提示, 返回true或者false, 如果为true, 则离开页面, 如果为false, 则停留在该页面，本文结合示例代码介绍的非常详细，需要的朋友可以参考下2023-01-01
最新评论