Question

我有一个使用这个jQuery插件打印的元素（#print-content）：

https://github.com/DoersGuild/jQuery.print

我不希望此元素显示在实际页面中，但我希望它在打印版本中显示。

我可以使用什么CSS属性，以便它仍然显示在打印版本中？可能是height:0或position absolute 0？“

Answer 1

您只能使用媒体查询。

#print-content {
    display: none; /*** Remove from the body ***/
}

@media print {
    #print-content {
        display: block; /*** Show just in print ***/
    }
}

Answer 2

AFAIK，您不能使用特定的CSS属性来控制是否打印元素，但您可以使用CSS媒体查询：

@media screen {
    #print-content {
        display: none;
    }
}

当页面显示在屏幕上时，这将阻止元素呈现，但是当它被打印时，它将根据CSS规则的其余部分正常处理它。

如果您想要相反的效果（隐藏在打印中，但在屏幕上显示），您可以使用：

@media print {
    #print-content {
        display: none;
    }
}

有关CSS @media查询的更多信息，请参阅this page。

仅供参考，默认情况下使用display: none;隐藏内容，然后使用display: block;在媒体查询中显示内容是不好的做法。这是基于元素的显示类型为block的假设，但它可能是其他任何内容，例如inline，inline-block等。它还使用两个规则而不是一个。

Answer 3

一种可能性是使用CSS以不干扰布局的方式隐藏元素。

CSS：

#print-content {
    display: none;  //may need !important
}

元素及其子元素不应显示，子元素仍应打印。有关显示属性的更多信息：http://www.w3schools.com/cssref/pr_class_display.asp

另一个解决方案（Andreas Grech在下面的帖子中）是使用单独的样式表：

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

How do I hide an element when printing a web page?

在打印样式表中，@ media print {}将用于定义应打印的内容。

Answer 4

尝试使用.clone()，.attr()，window.open()，.outerHTML

HTML

<pre id="print-content"> (<span class="light">highlighted</span> portion) </pre>
<div>abc 123</div>
<button id="save">Print</button>

CSS

.light {
    color:#0af;
}
#print-content {
    display:none;
}

JS

$("#save").click(function () {
    var text = $("body").clone();
    text.find("#print-content").attr("style", "display:block");
    text.find("#save, script").remove();
    var styles = $("style")[0].outerHTML;
    var popup = window.open("", "popup");
    popup.document.body.innerHTML = text[0].outerHTML + styles;
    popup.focus();
    popup.print();
});

jsfiddle http://jsfiddle.net/qz2too0o/

如何隐藏内容但仍然可以打印？

4 个答案: