ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript で DIV 要素のコンテンツを簡単に印刷するにはどうすればよいですか?

JavaScript で DIV 要素のコンテンツを簡単に印刷するにはどうすればよいですか?

Linda Hamilton
Linda Hamiltonオリジナル
2024-12-15 08:14:12994ブラウズ

How Can I Easily Print the Content of a DIV Element in JavaScript?

DIV コンテンツを簡単に印刷

DIV のコンテンツを印刷することは、Web 開発で遭遇する一般的なタスクです。この課題に対する効果的な解決策は次のとおりです。

解決策:

提供されている JavaScript 関数 PrintElem は、DIV コンテンツを印刷するための包括的なアプローチを提供しますが、DIV コンテンツとの互換性を強化するために若干の変更が加えられています。最新のブラウザのようなChrome:

function PrintElem(elem) {
  // Open a new window for printing
  var mywindow = window.open('', 'PRINT', 'height=400,width=600');

  // Write HTML structure to the new window
  mywindow.document.write(`<html><head><title>` + document.title + `</title></head>`);
  mywindow.document.write('<body >');
  mywindow.document.write('<h1>' + document.title + '</h1>');

  // Insert the DIV's innerHTML into the new window
  mywindow.document.write(document.getElementById(elem).innerHTML);

  // Complete the HTML structure and close the window
  mywindow.document.write('</body></html>');
  mywindow.document.close(); // Essential for IE >= 10

  // Focus and print the window
  mywindow.focus();
  mywindow.print();
  mywindow.close();

  return true;
}

使用法:

ID が「myDiv」の DIV の内容を印刷するには、次のように PrintElem 関数を呼び出すだけです:

PrintElem('myDiv');

以上がJavaScript で DIV 要素のコンテンツを簡単に印刷するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。