How to Print DIV content with Image using JavaScript

← PrevNext →

I have previously shared an article here explaining how to print HTML table with images using JavaScript. Now, here in this article I’ll show you how to print the contents of a DIV element with images using plain old JavaScript.

An HTML <div> element can have different types of content inside different elements, like a <p> element, a header element like <h2>, it can have an <img /> element etc.

image

Print DIV content with images using JavaScript

To print the contents of various (child) elements inside a <div> or any parent element, we’ll have to first extract the contents and store it in a variable. Then we’ll open a window (a pop window) and write the contents (stored in a variable) in the window and print.

Let’s see an example.

In the first example, the <div> will have two <p> elements and an <h2> (for header) element.

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            border: solid 1px #CCC;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id='parent'>
        <h2>This is header :-)</h2>
        
        <p>
            Child element 1 
        </p>
        <p>
            Child element 2
        </p>
    </div>

    <p>
        <input type='button' value='Print Content' onclick='myApp.printDiv()' />
    </p>
</body>
<script>
    var myApp = new function () {
        this.printDiv = function () {
            // Store DIV contents in the variable.
            var div = document.getElementById('parent');

            // Create a window object.
            var win = window.open('', '', 'height=700,width=700'); // Open the window. Its a popup window.
            win.document.write(div.outerHTML);     // Write contents in the new window.
            win.document.close();
            win.print();       // Finally, print the contents.
        }
    }
</script>
</html>
Try it
The parent <div> element has an id. Using the element’s id, I am first extracting the contents of it and storing it in a variable. See the above script.

The window object is important here. It represents a window in browser. I am using the object to open a new browser window.

window.open()

The method takes 4 parameters like url, name, features and replace. However, I have just assigned one value that is the height and width of the window. If you remove the first two blank parameters, the method will open a new window in new a tab.

The .write() method (win.document.write(div.outerHTML);) will write the contents in the new popup window, which is later closed using the .close() method.

After closing the window object, I am printing the contents using the .print() method.

win.print();

Note: If a printer is attached to the computer, it will ask you to choose a printer. Or else, it will print a PDF document.

Print <div> Content with Images

Now, lets print the contents of a <div> element along with images.

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            border: solid 1px #CCC;
            padding: 10px;
        }

        img { width: 75px; height: 75px; }
        input { font-size: 20px; }
    </style>
</head>
<body>
    <div id='parent'>
        <h2>This is header :-)</h2>
        
        <p>
            Child element 1 
        </p>
        <p>
            Child element 2
        </p>
        
        <!--Here are the images-->
        <div>
            <img src='https://www.encodedna.com/images/theme/javascript.png' alt='JS' />
            <img src='https://www.encodedna.com/images/theme/google.png' alt='Google' />
        </div>
    </div>

    <p>
        <input type='button' value='Print Content' onclick='myApp.printDiv()' />
    </p>
</body>
<script>
   var myApp = new function () {
        this.printDiv = function () {
            // Store DIV contents in the variable.
            var div = document.getElementById('parent');

            // Create a window object.
            var win = window.open('', '', 'height=700,width=700'); // Open the window. Its a popup window.
            win.document.write(div.outerHTML);     // Write contents in the new window.
            win.document.close();
            win.print();       // Finally, print the contents.
        }
    }
</script>
</html>
Try it

There is not much difference between the first and second example. The script is the same for both the examples, with or without images. There’s not much to explain.

However, I have defined CSS style in the above example (the 2nd example) for the elements inside the <head> tag, especially the images (img { width: 75px; height: 75px; } ). The images have specific width and height defined. See the <style> tag inside the <head> tag. But, the styles were not applied when I tried to print it.

We can apply style to the images and other elements before printing it.

Add some Style to the Print

To define style to the print, add a variable and add few styles (CSS styles) according to you requirement. For example,

<script>
    var myApp = new function () {
        this.printDiv = function () {
            var div = document.getElementById('parent');
            var win = window.open('', '', 'height=700,width=700');

            // Define and style for the elements and store it in a vairable.
            var style = '<style>';
            style = style + 'div, p {border: solid 1px #CCC;' +
            	'padding: 10px;}';
            style = style + 'img { width: 75px; height: 75px;}';
            style = style + '</style>';

            // Now, write the DIV contents with CSS styles and print it.
            win.document.write(style);
            win.document.write(div.outerHTML);
            win.print();
        }
    }
</script>
Try it

Now, the <div> element has borders and padding. The image has specific width and height. Similarly, if you want you can define fonts, size, colours etc.

Thanks for reading .

← PreviousNext →