使用此 js 代码打印时如何隐藏一些 div？答案

【问题标题】：How to hide some div when printing with this js code?使用此 js 代码打印时如何隐藏一些 div？
【发布时间】：2021-07-06 07:40:06
【问题描述】：

我正在使用此代码打印部分页面，如何不打印某些 div ？？？

<script>
$.fn.extend({
    print: function() {
        var frameName = 'printIframe';
        var doc = window.frames[frameName];
        if (!doc) {
            $('<iframe>').hide().attr('name', frameName).appendTo(document.body);
            doc = window.frames[frameName];
        }
        doc.document.body.innerHTML = this.html();
        doc.window.print();
        return this;
    }
});
</script>

按钮代码（要打印的 div id 是代码 cos id 不是静态的）

<button onclick="$('#<?php echo $v['id']; ?>').print();">Print</button>

打印代码正在工作，没问题，但我无法从打印中隐藏一些 div，所有带有 @media print 的 css 都在工作，并且只有当我从右键单击打印时才隐藏但不是当我尝试使用此代码打印按钮进行打印时工作。如何隐藏一些div？从内部的可打印 div 中移出 div - 不可能。

div 结构

<div class="some class"  id="some id" **that i'm printing with code**>
<div class="some class"  id="some id" **that i no need to print**>
<div class="some class"  id="some id" **part of printable div**>
</div>
</div>
</div>

使用按钮打印时此 CSS 不起作用

<style>
@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
} 
</style>

【问题讨论】：

您需要使用 @print 媒体查询并在该媒体中使用 display:none 隐藏元素
已经尝试使用来自@media 的无打印类，在使用右键菜单打印时工作 - 打印但在使用代码打印时不起作用，使用代码打印只是忽略所有类 @media 打印跨度>
我不明白，您是要隐藏屏幕上的元素还是打印屏幕上的元素？
在打印时隐藏，使用代码打印时，而不是使用标准打印菜单，如果我以标准方式打印（右键单击菜单打印）带有媒体打印的 css 有帮助（div 被隐藏），但是当我尝试使用按钮打印时（即使用代码） - 所有 div 都显示出来了。
好的.. 我明白了.. 因为您正在创建另一个 iframe，我想您还需要将这些 @print 添加到该 iframe.. 因为父框架样式不适用于 iframe。跨度>

标签： javascript php css

【解决方案1】：

解决了我的情况，通过添加

id="print<?php echo $v['id']; ?>"

到我需要打印的 div，所以所有其他的都将被隐藏

【讨论】：