打印到打印机时隐藏/显示 div答案

【问题标题】：Hide/show divs when printing to printer打印到打印机时隐藏/显示 div
【发布时间】：2023-03-19 15:41:01
【问题描述】：

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

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

更新：在 Richard Neil Ilagan 的建议之后，我尝试了以下方法，我觉得我很接近但无法确定。有什么建议吗？

<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 样式表进行打印，但可以即时完成吗？我的意思是在打印之前选择可打印的元素？
@Somebodyintrouble：我的朋友，代码是不必要的，它注意到但是一个带有各种 div 等的典型页面......
您可以为print 媒体查询设置一个不打印的类，例如@media print { .no-print { display:none; } }，然后将该类分配给您不想使用jQuery 打印出打印机端的东西，比如$('div').addClass('no-print');。
好主意，我会试一试告诉你。
哈哈，没错。 :) 我确实希望您没有使用 actual 纸张进行测试。 :p

标签： javascript jquery printing

【解决方案1】：

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

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

作为一种设计模式，您可以将打印媒体选择器与其余样式表结合起来以实现切换效果。

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

关于此事的更多内容：

Media types CSS2 标准
CSS Design: Going to print (alistapart.com)

【讨论】：

谢谢，我熟悉@media print 等。但我的问题略有不同......你能用某种切换控件更改要打印的元素吗？

【解决方案2】：

你应该用 css 设置它。

media="print"

试试这样的：

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

【讨论】：