ホームページ > ウェブフロントエンド > jsチュートリアル > 強化されたブラウザ互換性を使用して特定の DIV のコンテンツを印刷するにはどうすればよいですか?

強化されたブラウザ互換性を使用して特定の DIV のコンテンツを印刷するにはどうすればよいですか?

Patricia Arquette
リリース: 2024-12-06 17:32:11
オリジナル
689 人が閲覧しました

How Can I Print a Specific DIV's Content with Enhanced Browser Compatibility?

拡張機能による DIV コンテンツの印刷

さまざまな Web 開発シナリオでは、特定の DIV 要素のコンテンツを印刷する必要が生じる場合があります。 。これを達成するには、いくつかのアプローチが利用できます。この記事では、強化された機能とさまざまなブラウザー、特に Chrome 間での互換性を提供するメソッドについて詳しく説明します。

解決策

提供される関数 PrintElem() 、コンテンツを印刷するための包括的なアプローチを提供します。 DIV:

function PrintElem(elem) {
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');

    mywindow.document.write('<html><head><title>' + document.title + '</title></head>');
    mywindow.document.write('<body>');
    mywindow.document.write('<h1>' + document.title + '</h1>');
    mywindow.document.write(document.getElementById(elem).innerHTML);
    mywindow.document.write('</body></html>');

    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/

    mywindow.print();
    mywindow.close();

    return true;
}
ログイン後にコピー

説明

  1. 新しいウィンドウを開く: この関数は、表示する新しいブラウザ ウィンドウ mywindow を作成します。
  2. 設定ページ要素: 追加します。 head、title、body などの必須 HTML 要素を新しいウィンドウのドキュメントに追加します。
  3. DIV コンテンツの追加: コードは、指定された DIV 要素 (elem) の内部 HTML を抽出して書き込みます。新しいウィンドウの本文セクションに追加します。
  4. ブラウザ固有の互換性: との互換性を確保するため。さまざまなブラウザ、特に IE では、この関数は document.close() メソッドと document.focus() メソッドを使用します。
  5. 印刷とウィンドウ管理: HTML ドキュメントの構築後、mywindow のドキュメントが閉じられます。さらなる変更を防ぐため。ブラウザのフォーカスが新しいウィンドウに設定され、印刷が可能になります。 print() メソッドが呼び出され、最後に新しいウィンドウが閉じます。

この関数を使用すると、ページ タイトルなどの追加機能を備えた DIV 要素のコンテンツを簡単に印刷でき、確実に印刷できます。互換性を確保し、ユーザーにスムーズな印刷エクスペリエンスを提供します。

以上が強化されたブラウザ互換性を使用して特定の DIV のコンテンツを印刷するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート