1. 程式人生 > 程式設計 >關於React中使用window.print()出現頁面無響應問題解決記錄

關於React中使用window.print()出現頁面無響應問題解決記錄

目錄
  • 一、問題背景:
  • 二、問題原因:
  • 三、問題解決:
  • 總結:

一、問題背景:

window.print()頁面打印出現頁面無響應

看了網上很多辦法都是讓用window.location.reload(),對於這個解決方案不置可否,重新整理頁面當然可以解決這個問題,但是不高階

二、問題原因:

可能操作了document但是並未進行銷燬(可能是)

三、問題解決:

消除操作的document

封裝一個printFun()方法

//該方法引數 content:需要列印的元素
printFun = (content) =>{
        var Window = window.open("","頁面打DryeLCffmz
印","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,copyhistory=no"); var style = "<style type='text/'></style>"; Window.document.write(http://www.cppcns.comcontent + style); Window.focus(); Window.document.close(); //關閉document的輸出流,顯示選定的資料 Window.print(); //列印當前視窗 return Window; }

方法呼叫:billDetawww.cppcns.comils是你當前想要列印的元素的 id,當然只要是能找到該元素,其他方法都可以

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

總結:

出現樣式問題的需要自己將css加入進程式碼,就是printFun方法中的style變數,需要自己進行需求更改

到此這篇關於React中使用window.print()出現頁面無響應問題解決記錄的文章就介紹到這了,更多相關React使用window.print()現頁面無響應內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!