print html page inside form element

Question

A web page has <form> which needs to be sent to the printer for printing. Keyboard Cmd+P will print the whole page which is not what I want.

I wired up the event to a button on the footer but not sure how to send only the form content to the printer. Any idea how?

$('form').get(0).innerHTML

write a print css file and hide the stuff you don't want to show — datafunk, Aug 12 '16 at 12:13
have a look at this http://stackoverflow.com/questions/12997123/print-specific-part-of-webpage — Manish, Aug 12 '16 at 12:17

score 1 · Answer 1 · answered Aug 12 '16 at 12:25

1

This can easily be done using media queries. It'll work in IE9 and above, Chrome, FF, etc. For IE8, you can use polyfills.

Now all you've to do is hide the elements when printing. Write something like this in your css

@media print {
    #element-to-hide {
        display: none;
    }
}

This will completely hide the unwanted elements while printing.

answered Aug 12 '16 at 12:25

Bikas

2,709
14
32

event thought this works but it leaves blank space where the elemnt-to-hide was thus the form content which was expected to use one page, it is still taking 2 pages in the printer, where as if it is in it's own page, it will print one page only. – Fred J. Aug 12 '16 at 12:51
You can readjust the width, height, etc. of visible elements as well. That way you'll have no white space while printing – Bikas Aug 12 '16 at 15:09

Denis Baciu · Accepted Answer · 2016-08-16T11:53:46.487

You can get that element from page like a block and use Javascript to print it

<div class="print" onclick="PrintElem('#idFromPage')">

And Js code to print the block you need:

    function PrintElem(elem) {
    Popup($("body").html(), elem);
}

function Popup(data, elem) {
    var mywindow = window.open('', 'Page to Print', 'height=600,width=800');
    mywindow.document.write('<html><head><title>Print Document</title>');
    mywindow.document.write('<style> body * { visibility: hidden;  } .mobile-view {displa:none;} body, html { background:#fff !important;}   #' + elem + ', #' + elem + ' * {visibility: visible; } </style>');
    mywindow.document.write('</head><body>');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');

    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10

    $(mywindow).on('load', function () {
        mywindow.print();
    });

    return true;
}

print html page inside form element

2 Answers2