關(guān)于React中使用window.print()出現(xiàn)頁面無響應(yīng)問題解決記錄
更新時間：2021年11月11日 16:46:56 作者：與諸君共勉
這篇文章主要介紹了React中使用window.print()出現(xiàn)頁面無響應(yīng)問題解決記錄，首先問題原因可能是操作了document但是并未進(jìn)行銷毀（可能是），具體問題解決思路參考下本文吧
一、問題背景：
window.print()頁面打印出現(xiàn)頁面無響應(yīng)
看了網(wǎng)上很多辦法都是讓用
window.location.reload(),對于這個解決方案不置可否，刷新頁面當(dāng)然可以解決這個問題，但是不高級
二、問題原因：
可能操作了document但是并未進(jìn)行銷毀（可能是）
三、問題解決：
消除操作的document
封裝一個printFun()方法
//該方法參數(shù) 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(); //關(guān)閉document的輸出流, 顯示選定的數(shù)據(jù)
Window.print(); //打印當(dāng)前窗口
return Window;
}
方法調(diào)用：
billDetails是你當(dāng)前想要打印的元素的 id，當(dāng)然只要是能找到該元素，其他方法都可以
var windows = this.print(document.getElementById('billDetails').innerHTML);
windows.close();
總結(jié)：
出現(xiàn)樣式問題的需要自己將css加入進(jìn)代碼，就是
printFun方法中的style變量，需要自己進(jìn)行需求更改
到此這篇關(guān)于React中使用window.print()出現(xiàn)頁面無響應(yīng)問題解決記錄的文章就介紹到這了,更多相關(guān)React使用window.print()現(xiàn)頁面無響應(yīng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了淺談React和Redux的連接react-redux，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了React中Props的淺對比的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-05-05
React antd tabs切換造成子組件重復(fù)刷新
這篇文章主要介紹了React antd tabs切換造成子組件重復(fù)刷新,需要的朋友可以參考下2021-04-04
這篇文章主要介紹了react基于mobx封裝管理用戶登錄的store,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
在React中,受控組件指的是表單元素的value值受React組件的state或props控制的組件,而非受控組件則是表單元素的value值由DOM自身負(fù)責(zé)管理的組件,本文將給大家詳細(xì)介紹React受控組件與非受控組件,需要的朋友可以參考下2023-08-08
一篇文章介紹redux、react-redux、redux-saga總結(jié)
這篇文章主要介紹了一篇文章介紹redux、react-redux、redux-saga總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要介紹react實現(xiàn)路由攔截的,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-02-02
AntDesign ,簡稱antd是基于 Ant Design 設(shè)計體系的 React UI 組件庫,主要用于研發(fā)企業(yè)級中后臺產(chǎn)品,這篇文章主要介紹了Ant Design組件庫的使用教程,需要的朋友可以參考下2023-12-12
本篇文章主要介紹了詳解使用React進(jìn)行組件庫開發(fā)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
關(guān)于react-router中的Prompt組件使用心得
這篇文章主要介紹了關(guān)于react-router中的Prompt組件學(xué)習(xí)心得,Prompt組件作用是,在用戶準(zhǔn)備離開該頁面時,?彈出提示,?返回true或者false,?如果為true,?則離開頁面,?如果為false,?則停留在該頁面，本文結(jié)合示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-01-01