如何使用jQuery打印div内容

Question

我正在尝试打印内容，但是body没有包含我要插入的全部打印内容。 似乎是某种height问题。

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

如果您要打印某些数据，我建议像这样使用css设置媒体

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

当您进行打印时，这将为您提供p内容。 您可以为div元素做的一样

Answer 2

CSS媒体查询（打印）是正确的方法。 您也可以在jQuery中执行以下操作。 请记住，您的身体内容会增加一个div ，但是我想那可能不是问题。

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

• 这是上面的工作演示
• 为什么setTimeout(fn, 0)有用