How Can I Effectively Print the Contents of a DIV Element in JavaScript?

Printing the Contents of a DIV

Within the realm of web development, displaying information within designated areas is commonplace. However, the need arises to present these contents in a tangible format, such as printed documents. Among the various methods available, let's explore the most effective approach to printing the contents of a DIV.

Solution:

For this purpose, a JavaScript function called PrintElem has proven to be highly effective. This function takes a single element's ID as an argument and initializes a new window exclusively for printing. Within this window, the contents of the specified DIV are meticulously extracted and formatted into a printable HTML document.

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

  mywindow.document.write('<title>' + document.title + '</title>');
  mywindow.document.write('');
  mywindow.document.write('<h1 id="document-title">' + document.title + '</h1>');
  mywindow.document.write(document.getElementById(elem).innerHTML);
  mywindow.document.write('');

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

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

  return true;
}

This function operates seamlessly on modern browsers, including Chrome. Its effectiveness stems from its versatility in handling elements with complex content, ensuring a visually accurate representation on printed documents. With this technique, developers can effortlessly convert digital information into tangible formats, catering to diverse requirements.

The above is the detailed content of How Can I Effectively Print the Contents of a DIV Element in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!