Web Page Print Using Javascript | How to Print Web Page in Javascript?

Dear friends in this article we will tell you how to Web Page Print Using Javascript. So i hope you like our article because here you can get the source code free and this code you can use in your projects. Guys if you learn more interesting articles then go to the search bar and type article name then you can find easily more interested articles.

Some Languages

1. HTML

2. CSS

3. Javascript

HTML

First of all we have to write the syntax of html and if you use vs code to write the syntax then you with shift! You can easily generate the syntax of html by doing medicine, after that you have to set the title, then come in the body tag and take a class with the div and you can name that class whatever, then you have to take an id inside that class. Then inside that id you have to take the h2 tag and set the title of the document in it for web page print using javascript.

After that a paragraph tag is to be taken. Some description has to be set in that tag. Then a print button has to be taken, it has to be given an id so that through that id we can print the document by clicking on the print button.

html Code..

<div class="mydata">
        <div id="alldata">
            <h2>Printed by CodeWithNizami</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                Voluptas, doloribus obcaecati laudantium exercitationem 
                dolorem aut deleniti consequuntur recusandae, inventore 
                eligendi iste assumenda iure ratione velit neque eos odio 
                asperiores nostrum!
            </p>
        </div>
        <button type="button" onclick="printValue('alldata')">Prind Data</button>
    </div>

CSS

Now we are set design this web page print using javascript like design the heading tag and design paragraph tag give some padding margin and color etc. then save it.

CSS code..

.mydata{
            background-color: #fff;
            padding: 20px;
            width: 500px;
            border-radius: 5px;
            height: auto;
            margin-top: 30px;
        }
        h2{
            margin-bottom: 20px;
        }
        button{
            margin-top: 30px;
            outline: none;
            border: none;
            background-color: blue;
            color: #fff;
            border-radius: 5px;
            padding: 7px 20px;
            transition: 0.4s;
        }
        button:hover{
            background-color: rgb(66, 66, 255);
        }

Javacript

Finally we are make the function for click event and get the id for click button. And now we are used the print method for web page print using javascript project like this.

Javascript Code..

function printValue(alldata){
            var printData = document.getElementById(alldata);
            newWindow = window.open("");
            newWindow.document.write(printData.outerHTML);
            newWindow.print();
            newWindow.close();
        }

Watch Video Related the Article