我有一个打印预览库设置,向用户显示已完成产品的外观。问题是我们实际上并不想要打印图像,因为我们将打印到已经打上品牌的纸张上。
我已经将打印媒体查询添加到print.css并对其进行了更改,以便我们所有的图像都被拾取并添加到该print.css文件中存在的类hideImg中。
我要么找出打印介质查询不起作用的原因,要么是如何改变库/我的jquery。我已经尝试将它们添加到不同的div中并更改预览中的活动内容,但没有运气。
正在拾取类,控制台不会返回任何错误。
CSS:
@media print {
/* -- Hide screen specific elements -- */
.hideImg{
display:none !important;
visibility:hidden !important;
}
}
jQuery
var images = document.getElementsByTagName("img");
var i;
for(i = 0; i < images.length; i++) {
images[i].className += "hideImg";
}
HTML
<div id="content" class="container_12 clearfix">
<div id="printableArea" style="display:none;">
<img src="images/badgeHead.png" alt"needs more jpg"/>
<h1>Hi, my name is...<br/>
</h1>
<br>
<img src="images/badgeFoot.png" alt"needs more jpg"/>
</div>
</div>
图书馆jQuery
// Bind closure
$('a', print_controls).bind('click', function(e) {
e.preventDefault();
//adding the printframe contentwindow rather than body prints out just what we want
if ($(this).hasClass('print')) { print_frame[0].contentWindow.print(); }
else { $.printPreview.distroyPrintPreview(); }
});
答案 0 :(得分:0)
全屏尝试以下代码并提供打印指令。您可以按打印顺序查看检查文本。
@media print {
/* -- Hide screen specific elements -- */
.hideImg {
display: none !important;
visibility: hidden !important;
}
}
&#13;
<div id="content" class="container_12 clearfix">
<div id="printableArea" style="display:none;">
<img src="images/badgeHead.png" alt "needs more jpg"/>
<h1>Hi, my name is...<br/>
</h1>
<br>
<img src="images/badgeFoot.png" alt "needs more jpg"/>
</div>
<div class="hideImg">hello</div>
<h3>check</h3>
</div>
&#13;