關(guān)于React中使用window.print()出現(xiàn)頁面無響應(yīng)問題解決記錄
更新時間：2021年11月11日 16:46:56 作者：與諸君共勉
這篇文章主要介紹了React中使用window.print()出現(xiàn)頁面無響應(yīng)問題解決記錄，首先問題原因可能是操作了document但是并未進行銷毀（可能是），具體問題解決思路參考下本文吧
一、問題背景：
window.print()頁面打印出現(xiàn)頁面無響應(yīng)
看了網(wǎng)上很多辦法都是讓用
window.location.reload(),對于這個解決方案不置可否，刷新頁面當(dāng)然可以解決這個問題，但是不高級
二、問題原因：
可能操作了document但是并未進行銷毀（可能是）
三、問題解決：
消除操作的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加入進代碼，就是
printFun方法中的style變量，需要自己進行需求更改
到此這篇關(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)文章
Hooks是一種函數(shù)，該函數(shù)允許您從函數(shù)式組件 “勾住(hook into)”React狀態(tài)和生命周期功能。Hooks在類內(nèi)部不起作用 - 它們允許你無需類就使用 React。2021-05-05
這篇文章主要給大家介紹了關(guān)于React Native自定義組件與輸出方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
詳解react內(nèi)聯(lián)樣式使用webpack將px轉(zhuǎn)rem
這篇文章主要介紹了詳解react內(nèi)聯(lián)樣式使用webpack將px轉(zhuǎn)rem，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了React中useState值為對象時改變值不渲染問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
React是一個用于構(gòu)建用戶界面的JavaScript庫,下面這篇文章主要給大家介紹了關(guān)于React組件化的一些額外知識點,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10
react-router-dom v6版本實現(xiàn)Tabs路由緩存切換功能
今天有人問我怎么實現(xiàn)React-Router-dom類似標簽頁緩存,很久以前用的是react-router v5那個比較容易實現(xiàn),v6變化挺大,但了解react的機制和react-router的機制就容易了,本文介紹react-router-dom v6版本實現(xiàn)Tabs路由緩存切換,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了React.Children的用法詳解，幫助大家更好的理解和學(xué)習(xí)使用React框架，感興趣的朋友可以了解下2021-04-04
react?umi?刷新或關(guān)閉瀏覽器時清除localStorage方式
這篇文章主要介紹了react?umi?刷新或關(guān)閉瀏覽器時清除localStorage方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
通過傳遞組件，我們可以將復(fù)雜組件內(nèi)部的一部分 UI 交由外部組件來控制渲染，這也是控制反轉(zhuǎn)（Inversion of Control）的一種體現(xiàn)，在 React 中，我們可以通過三種方式來傳遞組件，本文就來給大家述說這三種方式,需要的朋友可以參考下2023-07-07
props是組件（包括函數(shù)組件和class組件）間的內(nèi)置屬性，用其可以傳遞數(shù)據(jù)給子節(jié)點，props用來傳遞參數(shù)。組件實例化過程中，你可以向其中傳遞一個參數(shù)，這個參數(shù)會在實例化過程中被引用2022-12-12