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.

Nội dung chính Show

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?

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.




    


    id='parent'>
        This is header :-)
        
        
            Child element 1 
        
        
            Child element 2
        
    

    
        onclick='myApp.printDiv()' />

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.

This is header :-)

Child element 1

Child element 2

onclick='myApp.printDiv()' />

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 '; 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.

programming javascript

Javascript print div content with image

This is header :-)

This is header :-)

How do I print just a div?

How do I print a specific DIV in HTML?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội