Hướng dẫn print hidden div javascript

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.

printWindow.document.write('');.

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:.

onclick="window.print();return false;" />.

print..

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

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

Đọc tiếp