Print Content of Div element by using Javascript

Then we will add a button which calls the “printDivContent()” Javascript function on its “Onclick” event:

Javascript code
To print the content of an HTML element such as “div”, you need to store its data in a variable. Now, we will perform the following steps while coding in JavaScript:

• First, we will create a function named “printDivContent()”.
• Then, define variables named “contentOfDiv” and “newWin” inside the “printDivContent()” function.
• By using the “divCon” id, we will get the content of the “div” HTML element and store it in the variable “contentOfDiv”.
• Variable “newWin” will be used to open the print window as a popup.
• Then we will use the “newWin” variable to call the JavaScript method “document.write()”. In this method, we will pass the tags of the HTML elements that are added inside “div”, which in return get the content of the specified elements.

Here is the complete code for the above-given example:

function printDivContent ( ) {
var contentOfDiv = document. getElementById ( «divCon» ) . innerHTML ;
var newWin = window. open ( » , » , ‘height=650, width=650’ ) ;
newWin. document . write ( » ) ;
newWin. document . write ( » ) ;
newWin. document . write ( ‘ Content of Div element:
‘ ) ;
newWin. document . write ( contentOfDiv ) ;
newWin. document . write ( » ) ;
newWin. document . close ( ) ;
newWin. print ( ) ;
}

After running above HTML code, the resultant output on browser will be:

Clicking the “Print” button will call the JavaScript “printDivContent()” function and the following window will appear on the screen:

As you can see, we have successfully accessed the content of the added “div” element:

We have provided all the necessary information about printing the content of a “div” element using Javascript.

Conclusion

To print the content of a “div” element, firstly, you need to assign an “id” in HTML, then store its data in a variable by accessing the specified “id” in JavaScript code. While programming in JavaScript, there come situations where it is required to print a particular segment of a web page. In such cases, our provided method can help you out. This blog discussed the procedure of printing the div element’s content with the help of JavaScript.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.

Источник

How to Print Contents of a Div using JavaScript

Hi! Today let’s see how to print contents of a div using javascript. Have you ever tried printing a web page or part of a page programmatically? There is an interesting utility in JavaScript called print(). It is one of the methods of the ‘Window’ object and is used to trigger your system’s printing feature.

In case you want to print part of a page area, the simple solution is to place all the printable content inside a ‘div’ block and invoke the print action with some user event. Let’s see how to do it.

Print Contents of a Div in JavaScript:

Let’s first create a div container to hold the printable part.

        
 
Test Printing
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
 
 
   

In the above markup, we have created a container with an id #printableDiv and placed some text inside. This is the block we need to print.

Next add a button element to trigger the print action when the user clicks on it.

Include onclick event to the button and pass the id of the div we have created earlier.

Finally the printing part! Write a simple java script function to print the div contents.

JavaScript:

The js function will open a window of defined width and height, write the contents of the div to it and invokes printing window using the print() function.

Keep in mind that the contents will be printed without any css styles you have in the webpage. To preserve styles, you must link the css file using windowsobject. document.write() method like I did in the JS code.

One good thing about using this method is it will not fire printing immediately, but the print window as a means of confirmation — just leaving the choice to users in case they clicked on it accidentally.

That explains printing div contents using javascript. The method described in this post is very useful to print a portion of a webpage. You just have to keep all the printable contents in a div block and trigger the java script function. I hope you like this tutorial. Please share it in your social circle if you find it useful.

Источник

Print the Content of a div Element using HTML & JavaScript

Hey Guys, In Today’s Blog We are going to see How to create and Print the Content of a Div Element Using Html and JavaScript. We Use Html and Javascript Code For Print the Content of a Div Element.

Here is a preview of how we Print the Content of a div.

This is a very simple project in which the content will be contained in a div container that will be created using a basic HTML element and using the button command, the content will be printed inside the div area. This project teaches you how to construct a print button that lets users print any webpage they need while also teaching you the fundamentals of printing.

Do you want to learn HTML to JavaScript? 🔥

If yes, then here is our Master Frontend: Zero to Hero eBook! 📚 In this eBook, you’ll learn complete HTML, CSS, Bootstrap, and JavaScript from beginner to advance level. 💪 It includes 450 Projects with source code.

Now The Project is going to create and for that, we are first adding an HTML Code.

HTML Code:

First We create a div class with the name “printableArea” and Inside the div class we add a header using an H1 tag with the content Print me, Then We close the Div tag.

Then We create an input class as button type and set the onclick function by giving a name for it and finally a value “print a div ” is added.

So that’s for HTML, Now We directly go for JavaScript to print the div area. Here we skip the CSS, if you want means you can use it. As it is a sample of the project so we directly added the content.

HTML Output:

JavaScript Code:

Here first we create an function and calling out the onclick function which is in HTML to make contents inside to work it. Now We creating two variables namely “printContents” and “originalContents” one for calling out the element using JS get Element property and one for printing the contents inside of div class.

After that we are storing the printContents values to the originalContents value.

Then We use the JS property window.print to make a print of the contents inside of div class.

Lastly the contents which is inside of variable “originalContents” were again stored to the same variable declared three lines above.

So that’s for JS , Now We came to end of our Project as we successfully added the source codes. So we can now move for project preview which is mentioned below of Output Section.

Video Output Of Print the Content of a div Element:

Final Output Of Print the Content of a div Element:

See the Pen
Print Div area by Greg Vissing (@gvissing)
on CodePen.

Now We have Successfully created Print the Content of a div Element Using Html and JavaScript. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

If you find out this Blog helpful, then make sure to search Codewithrandom on Google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Источник