How to make a print preview and print buttons for my html form

Question

Hi currently i'm working on a html form with some fields, what all I need is to get a print preview of that form with the filled answers and later it should be printed on clicking on a print button. Can any one please help me out with this, I would be very thankful to you if you can.

possible duplicate of [JavaScript print preview](http://stackoverflow.com/questions/1090692/javascript-print-preview) — SimarjeetSingh Panghlia, Mar 13 '15 at 05:21

score 3 · Answer 1 · answered Mar 13 '15 at 05:29

Here is the example you can refer this. Html 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>

And include this css link:

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

now print.css file :

@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;
    }
  }

and style.css

@media screen /*--This is for Screen--*/
{
    .btn
    {
        background-color: #AFAFAF;
        display: block;
    }
    .tble
    {
        background-color: #E5E5E5;
        border: 1px solid #CD853F;
    }
}

Now include this javascript code :

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

I hope this answer help!!!

its works I have tried it in my local, tested and posted this answer. let me know if you have any concern on this — john smith, Mar 13 '15 at 05:40
But I have a form with text fields and drop downs.... Will it work for that?? i mean can i get those filled data as a pdf? — Atchyut Nagabhairava, Mar 13 '15 at 05:43
ya it works for form also because you are viewing everything inside of body tag so whatever is inside body tag it is previewed and printed ... — john smith, Mar 13 '15 at 05:47
Its working for a static data.... But i'm not able to get the data from the text fields or a drop down..... :( — Atchyut Nagabhairava, Mar 13 '15 at 05:48
ok then for dynamic preview of form data refer this link : http://adrian-alexan.blogspot.in/2009/12/customizing-entities-print-preview-form.html — john smith, Mar 13 '15 at 05:58

Rohan Kumar · Answer 2 · 2015-03-13T05:32:04.943

2

Try,

$('button').on('click',function(){
    print();
});

For print preview you can try Print and Print Preview separately using HTML, CSS and JavaScript

edited Mar 13 '15 at 05:32

answered Mar 13 '15 at 05:20

Rohan Kumar

40,431
11
76
106

it is for print na?? how can i get print preview? – Atchyut Nagabhairava Mar 13 '15 at 05:25

score 1 · Answer 3 · answered Mar 13 '15 at 05:20

1

You can use javascript method window.print()

answered Mar 13 '15 at 05:20

prajeesh

2,202
6
34
59

How to make a print preview and print buttons for my html form

3 Answers3