打印到打印机时隐藏/显示div [英] Hide/show divs when printing to printer

问题描述

是否可以点击页面上的按钮/图像/链接并包含/排除其他元素的打印？ （在实际的打印机上）
我想给用户选择要打印的元素。使用jQuery javascript是否可行？

Is it possible to click on a button/image/link on a page and include/exclude other elements from being printed? (on an actual printer) I'd like to give the users the selection of which elements to print. Is this feasible with jQuery of Javascript?

为了更好地理解而编辑：我想让用户通过添加打印来选择要打印的页面的哪些部分这个/不打印每个div旁边的这个按钮，覆盖我在print.css文件中设置的默认设置。

Edited for better understanding: I'd like to let the user choose which parts of the page he wants to print by adding a print this/don't print this button next to each div, overriding the default settings i've set in my print.css file.

更新：Richard Neil Ilagan建议之后，我已经尝试了以下，我觉得我很接近，但不能指出它。有什么建议吗？

Update: After Richard Neil Ilagan's suggestion, i've tried the following and I feel I'm close but cant nail it. Any suggestions?

<style type="text/css">
@media print { 
    .no-print { display:none; } 
}
</style>

<script>
$(document).ready(function() {
    $('.dontPrint').click(function() { $('maybe').addClass('no-print'); });
});
</script>

<img class="dontPrint" src="images/cancel.png" title="Dont print bla bla" /></a>
<div id="maybe">bla bla</div>

推荐答案

是的。您可以使用CSS的 @media print 媒体类型选择器来实现。示例（打印时隐藏所有输入）：

Yes. You can do that by using CSS's @media print media type selector. Example (hide all inputs when printing):

@media print {
    input {
        display: none;
    }
}

作为设计模式，您可以组合打印媒体选择器使用其余样式表来实现切换效果。

As a design pattern, you may combine print media selector with the rest stylesheets to achieve toggle effect.

HTML：

<div class="for-screen">
    <input type="submit" value="Shown when not printing">
</div>
<div class="for-print">
    <p>Shown instead when printing</p>
</div>

CSS：

.for-screen {display: block;}
.for-print {display: none;}

@media print {
    .for-screen {display: none;}
    .for-print {display: block;}
}

关于此事的更多内容：

• 媒体类型


• CSS设计：打印（alistapart.com）

• Media types on CSS2 standard
• CSS Design: Going to print (alistapart.com)

这篇关于打印到打印机时隐藏/显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！