如何使用jQuery打印div内容

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

Answer 1

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

Answer 2

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

• Here is a working demo for the above
• Why setTimeout(fn, 0) is useful