programming javascript

Javascript print div content with image

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

element can have different types of content inside different elements, like a

element, a header element like

, it can have an

To print the contents of various [child] elements inside a

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

will have two

elements and an

[for header] element.



    
        div {
            border: solid 1px #CCC;
            padding: 10px;
        }
    


    
        This is header :-]
        
        
            Child element 1 
        
        
            Child element 2
        
    

    
        
    

  



    var myApp = new function [] {
        this.printDiv = function [] {
            
            var div = document.getElementById['parent'];

            
            var win = window.open['', '', 'height=700,width=700']; 
            win.document.write[div.outerHTML];     
            win.document.close[];
            win.print[];       
        }
    }

Try it

The parent

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.

Now, lets print the contents of a

element along with images.



    
        div {
            border: solid 1px #CCC;
            padding: 10px;
        }

        img { width: 75px; height: 75px; }
        input { font-size: 20px; }
    


    
        This is header :-]
        
        
            Child element 1 
        
        
            Child element 2
        
        
        
        
            
            
        
    

    
        
    


   var myApp = new function [] {
        this.printDiv = function [] {
            
            var div = document.getElementById['parent'];

            
            var win = window.open['', '', 'height=700,width=700']; 
            win.document.write[div.outerHTML];     
            win.document.close[];
            win.print[];       
        }
    }

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 tag, especially the images [img { width: 75px; height: 75px; } ]. The images have specific width and height defined. See the tag inside the 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,

    var myApp = new function [] {
        this.printDiv = function [] {
            var div = document.getElementById['parent'];
            var win = window.open['', '', 'height=700,width=700'];

            
            var style = '';
            style = style + 'div, p {border: solid 1px #CCC;' +
            	'padding: 10px;}';
            style = style + 'img { width: 75px; height: 75px;}';
            style = style + '';

            
            win.document.write[style];
            win.document.write[div.outerHTML];
            win.print[];
        }
    }

Try it

Now, the

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 →

How do I print just a div?

To print the content of div in JavaScript, first store the content of div in a JavaScript variable and then the print button is clicked. The contents of the HTML div element to be extracted.

How do I print a specific DIV in HTML?

Introduction.

function PrintDiv[].

var divContents = document.getElementById["printdivcontent"].innerHTML;.

var printWindow = window.open['', '', 'height=200,width=400'];.

printWindow.document.write['Print DIV Content'];.

How do you display an image in JavaScript?

Steps:.

Create element in the HTML code..

Add style to element and set display properties to none..

Create a JavaScript “show[]” function that can access the image and change the display property to block..

Add button in HTML code which calls “show[]” function when user clicks on it..

How do you print HTML content on click of a button but not the page?

You can easily add a print button to your web page by adding the following code to your HTML document where you want the button to appear:.

title="window.print[];return false;" />.

print..

type="text/css" media="print" />.

body {visibility:hidden;} .print {visibility:visible;}.

This is header :-]

This is header :-]

Add some Style to the Print

How do I print just a div?

How do I print a specific DIV in HTML?

How do you display an image in JavaScript?

How do you print HTML content on click of a button but not the page?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề