如何使用jquery打印div内容

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

2 个解决方案

#1

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

如果你想打印某些数据我建议使用这样的css设置媒体

@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

当你去打印时,这将给你p内容。你可以为你的div元素做同样的事情

#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.

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

Here is a working demo for the above

这是上面的工作演示

Why setTimeout(fn, 0) is useful

为什么setTimeout(fn,0)很有用

#1