如何使用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)有用