how to print the div contents using jquery

Question

I am trying to print my contents, but the body does not contain the entire print contents which i am inserting. Seems to some sort of height issue.

var printcontent=$("#printDiv").html();
var printdiv=document.createElement('div');
$(printdiv).html(printcontent);
$('body').before(printdiv);
$('body').css('visibility', 'hidden');
window.print();
$('body').css('visibility', 'visible');

Why are you using `.before()`? Content should be *in* the body, not *before* it... — nnnnnn, Jul 06 '15 at 11:24

score 2 · Answer 1 · answered Jul 06 '15 at 11:25

if you want to print certain data I recommend set media using css like this

@media print {
    p {
        font-family: georgia, serif;
        font-size: 14px;
        color: blue;
    }
}

this will give you p content when you go for print. same you can do for your div element

score 0 · Answer 2 · edited May 23 '17 at 12:30

CSS media query (print) is the right way to do it. You could also do something like the following in jQuery. Bear in mind that you'd end up having an extra div around your body contents, but that may not be a problem I guess.

var printcontent = $("#printDiv").html();
var printdiv = $('<div/>', { 'id': "print-layout"}).html(printcontent);

$('body').wrapInner("<div id='body-content'></div>");
$('#body-content').before(printdiv);
$('#body-content').css('visibility', 'hidden');

window.print();
setTimeout(function() {
    $('#print-layout').remove();
    $('#body-content').css('visibility', 'visible');
}, 0);

how to print the div contents using jquery

2 Answers2