About the solution record of the page unresponsiveness when using window.print() in React

1. Background of the problem:

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

I have seen many solutions online that use window.location.reload() . I am not sure about this solution. Refreshing the page can certainly solve this problem, but it is not advanced.

2. Causes of the problem:

The document may have been manipulated but not destroyed (maybe)

3. Problem solving:

Eliminate the document of the operation

封裝一個printFun()方法

//The method parameter content: the element to be printed printFun = (content) => {
        var Window = window.open("", "Print Page", "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(); //Close the output stream of the document and display the selected data Window.print(); //Print the current window return Window;
    }

Method call: billDetails是你當前想要打印的元素的id，當然只要是能找到該元素，其他方法都可以

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

Summarize:

If there are style problems, you need to add CSS to the code yourself, that is, style variable in the printFun method, and you need to change it yourself

This is the end of this article about how to solve the problem of page unresponsiveness when using window.print() in React. For more related content about page unresponsiveness when using window.print() in React, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!