如何添加 printThis() 元素异常？答案

【问题标题】：How to add printThis() element exception?如何添加 printThis() 元素异常？
【发布时间】：2019-04-12 06:56:42
【问题描述】：

可以不打印包含在 printThis() 元素中的 div 吗？

示例：

<div id="print-it">

<div>hello</div>

<div id="no-print-this">
<button>must be show on page but not print</button>
</div>

</div>

<button id="printMe">Print button</button>

和查询

$("#printMe").click(function () {
$('#print-it').printThis();
});
});

div id "no-print-this" 曾经显示打印...是否可以使用此 jQuery 打印插件方法将其隐藏在打印页面上？

可以添加 $('#no-print-this').hide();到jquery点击功能，但关闭打印窗口浏览器后div“no-print-this”不再显示......

@media print 方法在这里不起作用。所以我不知道prinThis jquery插件是否可行。

谢谢！

【问题讨论】：

How do I hide an element when printing a web page?的可能重复
humm no :) @media print 仅使用 css 和 PrinThis() jquery
@media print 是一个 CSS 媒体查询，用于在打印时操作元素。您仍将使用 JavaScript 进行实际打印。您可以使用printThis() 的importCSS 或loadCSS 选项来加载媒体查询CSS。对于printThis()，请参阅Styling Printed Content。
非常感谢 Showdev！你是真的。我会用你的提示（loadCSS）发布解决方案。没关系:))
我是 printThis 的作者，@showdev 是正确的 - 使用 @media print 是排除元素的首选方法。此外，您可能希望充实 @media print 以确保绕过 printThis 使用 control + p 的用户获得良好体验

标签： javascript jquery html plugins printthis

【解决方案1】：

所以解决方案：（感谢 Showdev）

$("#printMe").click(function () {

$('#print-it').printThis({
            importCSS: true,
            importStyle: true,
            loadCSS: "/assets/css/print_rules_page1.css"
            });
});

它需要在 printThis() jquery 插件中使用 inportCSS 和 loadCSS

CSS（“loadCSS”加载文件 print_rules_page1.css）

@media print 
{
#no-print-this,#no-print-this2 *{
display: none !important;
}
}

【讨论】：