CODEWITHSUNDEEP
javascriptjquery
user4956265
user4956265

Reputation:

how to print the div contents using jquery

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');

Upvotes: 0

Views: 166

Answers (2)

lshettyl
lshettyl

Reputation: 8181

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

Upvotes: 0

Pranay Rana
Pranay Rana

Reputation: 176956

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

Upvotes: 2

Related Questions