How to Print Contents of Div in JavaScript

Often you may need to print contents of div in JavaScript. You can do this using plain JavaScript, or using CSS media queries. In this article, we will learn a couple of simple ways to print contents of div in JavaScript.

How to Print Contents of Div in JavaScript

You can print contents of div using plain JavaScript, or using CSS.

1. Using JavaScript

Here is a simple code snippet to print contents of div in JavaScript. Here we create a document printer using window.open() function. Then we use document.write() function to write different HTML elements into the the content to be printed. It can be a div or a full-fledged HTML page. When we are done, we close this document using document.close() function, and start printing using print() function.

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

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

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

    mywin.print();
    mywin.close();

    return true;
}

In this case, the advantage is that your content to be printed doesn’t depend much on the actual page contents and can be customized as you wish. On the flip side, it is tedious to recreate the HTML for entire content to be printed.

2. Using CSS

A more efficient solution is to use CSS media query for print. It automatically formats the page and contents as required for printing. Here is an example to set CSS for div myDiv to be printed.

@media print {
    .myDiv {
        background-color: white;
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        padding: 15px;
        font-size: 14px;
        line-height: 18px;
    }
}

Now when you print your web page, this div’s formatting is updated as per the above media query to make it print-friendly.

In fact, you can use this media query to hide certain sections of your page if you don’t want them to be printed. Here is an example where we hide everything and display only those parts of the page within the element with id=’section-to-print’

@media print {
  body * {
    visibility: hidden;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}

This method is very useful because it leverages the existing content on your web page, without having to rewrite its HTML code for printing. It allows you to easily pick and choose and customize the elements that you want to print, without any additional code.

In this article, we have learnt a couple of simple ways to print contents of div. You can use them to print other HTML elements such as para, span, etc. also, not just divs.

How to Print Contents of Div in JavaScript