Home > DeveloperSection > Articles > Print and Print Preview separately using HTML, CSS and JavaScript

Print and Print Preview separately using HTML, CSS and JavaScript


CSS-CSS3 CSS-CSS3 
Ratings:
2 Comment(s)
 88702  View(s)
Rate this:

Print and Print Preview separately using HTML, CSS and JavaScript

In this article I am trying to make print and print preview separately using HTML, CSS and JavaScript

When we create an application on HTML with CSS and JavaScript and I need to add print and print preview button separately on this application. Below I am making a demo project on HTML with CSS and JavaScript.

Now firstly make a HTML file which is print on paper.

Code:

<html>

<body  id="printarea">

    <table class="tble">

        <tr>

            <td>

                Student Name

            </td>

            <td>

                John Sypon

            </td>

        </tr>

        <tr>

            <td>

                Student Rollnumber

            </td>

            <td>

                R001

            </td>

        </tr>

        <tr>

            <td>

                Student Address

            </td>

            <td>

                132 Kane Street Toledo OH 43612.

            </td>

        </tr>

        <tr>

            <td>

                <input type="button" value="Print" class="btn" onclick="PrintDoc()"/>

            </td>

            <td>

                <input type="button" value="Print Preview" class="btn" onclick="PrintPreview()"/>

            </td>

        </tr>

    </table>

</body>

</html>

 

We can add the css file in our html file:

<link rel="stylesheet" type="text/css" href="print.css" />

<link rel="stylesheet" type="text/css" href="Style.css" />

 

Output:

Print and Print Preview separately using HTML, CSS and JavaScript

And I am also added two CSS for make fine-looking our application, below is listed both css:

       1.        Print.css

       2.       Style.css

Print.css:

The Print.css file is making a fine-looking our application when we give the print or print preview command. Below is Print.css file code.

@media print /*--This is for Print--*/

{

    .btn

    {

        display: none;

    }

    .tble

    {

        background-color: #CD853F;

        border:1px solid green;

        -webkit-print-color-adjust: exact

 

/*above line of codes will set the table background-color and change the border color when we give the print and preview (print preview only when we see on print preview via browser) command*/

    }

   

}

@media screen /*--This is for Print Preview Screen--*/

{

    .btn

    {

        display: none;

    }

    .tble

    {

        background-color: #CD853F;

        border:1px solid green;

    }

}

 

Above @media screen use for change the style when we show on print preview, this print preview is made by itself in our application, I am creating this print preview using javascript in a window format and we also known as every html application is need the style for stunning our application, and @media screen is provide the style when we open that application in new window as print preview.

Style.css

@media screen /*--This is for Screen--*/

{

    .btn

    {

        background-color: #AFAFAF;

        display: block;

    }

    .tble

    {

        background-color: #E5E5E5;

        border: 1px solid #CD853F;

    }

}

 

Above Stylesheet code will provide the style of our application on screen (means on browser).

JavaScript:

Here I am using the javascript which is made a window where we give the print command.

<script type="text/javascript">

/*--This JavaScript method for Print command--*/

    function PrintDoc() {

        var toPrint = document.getElementById('printarea');

        var popupWin = window.open('', '_blank', 'width=350,height=150,location=no,left=200px');

        popupWin.document.open();

        popupWin.document.write('<html><title>::Preview::</title><link rel="stylesheet" type="text/css" href="print.css" /></head><body onload="window.print()">')

        popupWin.document.write(toPrint.innerHTML);

        popupWin.document.write('</html>');

        popupWin.document.close();

    }

/*--This JavaScript method for Print Preview command--*/

    function PrintPreview() {

        var toPrint = document.getElementById('printarea');

        var popupWin = window.open('', '_blank', 'width=350,height=150,location=no,left=200px');

        popupWin.document.open();

        popupWin.document.write('<html><title>::Print Preview::</title><link rel="stylesheet" type="text/css" href="Print.css" media="screen"/></head><body">')

        popupWin.document.write(toPrint.innerHTML);

        popupWin.document.write('</html>');

        popupWin.document.close();

    }

</script>

Above I created two javascript functions (method) PrintDoc () and PrintPreview ()

PrintDoc ():

Now I am explaining PrintDoc():-

       1.       I am creating a variable toPrint named and initialize with document.getElementById('printarea') printareais the id of table which is we want to print.

      2.      Now here I am also is create a variable with popupWin named and it is initialize with window.open('', '_blank', 'width=350,height=150,location=no, left=200px')

This line will make a window.

      3.       popupWin.document.open() this code will open the window with 350px width and 150px height.

      4.        popupWin.document.write('<html><title>::Preview::</title><link rel="stylesheet" type="text/css" href="print.css" /></head><body onload="window.print()">') this line will generate a print dialog box, and add the css file for this window.

Print and Print Preview separately using HTML, CSS and JavaScript

     5.        popupWin.document.write(toPrint.innerHTML) this line add the data which want to print in the print window.

     6.        popupWin.document.close() this line will close the document.

 

PrintPreview ()

This method will work same as PrintDoc() method but difference is that in this method is making for print  preview your document.

Below are images for print and print preview.

 1.       Below the first time load in browser.

Print and Print Preview separately using HTML, CSS and JavaScript

 2.       When we click on Print Preview button the background color and border color will change on this window and print and print preview button will also hide in this window.

Print and Print Preview separately using HTML, CSS and JavaScript

 3.       When we click on print button. This is print on paper.

Print and Print Preview separately using HTML, CSS and JavaScript

 

Note:

When we give the print preview command the background color will not load this problem resolve for Mozilla you can go on Page Setup and check the Pint Background.

Print and Print Preview separately using HTML, CSS and JavaScript

And for webkit we add the

-webkit-print-color-adjust: exact add in CSS file.


Could be work to print pdf?

By Maria Correa on   3 years ago
Hello,
I tried your tutorial and it works amazing. I made the two functions in the same button, in my opencart product page. You can check it here: http://www.leleo.com.ar/store/index.php?route=product/product&product_id=50&path=25. A lot of work in CSS page.
Now I want to ask if there any posibility to add some code jspdf to print in pdf file. Or some javascript code to make a pdf.
Thanks you!

why my css doesn't work?

By NA NA on   one year ago
i put the same code in my print.css,but it doesn't work!help me out!

Don't want to miss updates? Please click the below button!

Follow MindStick