Reactでwindow.print()を使用した際にページが応答しなくなる問題の解決記録について

1. 問題の背景:

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

オンラインでwindow.location.reload()を使用する多くのソリューションを見てきました。このソリューションについてはよくわかりません。ページを更新すれば確かにこの問題は解決できますが、高度なものではありません。

2. 問題の原因:

文書は改ざんされたかもしれないが、破壊されたわけではない（おそらく）

3. 問題解決:

操作のドキュメントを削除する

封裝一個printFun()方法

//メソッドパラメータcontent: 印刷する要素printFun = (content) => {
        var Window = window.open("", "ページの印刷", "ツールバー=いいえ、場所=いいえ、ディレクトリ=いいえ、ステータス=いいえ、メニューバー=いいえ、スクロールバー=いいえ、サイズ変更可能=はい、コピー履歴=いいえ");
        var style = "<style type='text/css'></style>";
        Window.document.write(コンテンツ + スタイル);
        ウィンドウにフォーカスを当てる
        Window.document.close(); //ドキュメントの出力ストリームを閉じて、選択したデータを表示します。 Window.print(); //現在のウィンドウを印刷します。 return Window;
    }

メソッド呼び出し: billDetails是你當前想要打印的元素的id，當然只要是能找到該元素，其他方法都可以

var windows = this.print(document.getElementById('billDetails').innerHTML);
    ウィンドウを閉じます。

要約:

スタイルの問題がある場合は、自分でコードにCSSを追加する必要があります。つまり、 printFunメソッドのstyle変数を追加し、自分で変更する必要があります。

React で window.print() を使用する際にページが応答しない問題を解決する方法についての記事はこれで終わりです。React で window.print() を使用する際にページが応答しない問題に関する関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。