打印 div 的内容，除了其中的某些元素，不起作用

Question

我想打印 div 的内容，不想在打印预览中显示此 div 中的某些元素，我尝试给那些不打印 class @media 打印中的元素，但没有成功！请帮忙！这是 Javascript

<script type="text/javascript">
    function PrintPanel() {
        var panel = document.getElementById("content");
        var printWindow = window.open('', '', 'height=400,width=800');
        printWindow.document.write('<html><head><title>DIV Contents</title>');
        printWindow.document.write('</head><body >');
        printWindow.document.write(panel.innerHTML);
        printWindow.document.write('</body></html>');
        printWindow.document.close();
        setTimeout(function () {
            printWindow.print();
        }, 500);
        return false;
    }

</script>

这是css

<style>
    .noprint {
        color: red;
    }

    @media print {
        p {
            color: green;
        }

        .noprint {
            display: none;
        }
    }
</style>

这是html

<body>
<div id="content">
    <p>show this, in print preview</p>

    <div class="noprint">
        dont show this, in print preview!
    </div>
</div>
<a id="btnPrint" runat="server" Text="Print" onclick="PrintPanel();" style="cursor:pointer;">print</a>

我在 jsfiddle 中提供了一个示例： sample link

Answer 1

我添加了这段代码来删除弹出窗口中渲染之前的元素，真的很简单！此代码仅通过 Jquery 的 $() 之类的查询获取元素，并在本例中使用方法 removeChild(element) 从父节点 panel 中删除 div.

var el = document.querySelector('.noprint');
panel.removeChild(el);

https://jsfiddle.net/457vjehs/6/

Answer 2

实际上，使用 window.open 新创建的 window 没有附加任何样式。

这是一张快照

可以通过在下面的代码中添加内联样式来为其添加样式

printWindow.document.write('<html><head><style media="print">' +
            'p {color: green;}.noprint {display: none !important;}</style><title>DIV Contents</title>');

打印 div 的内容，除了其中的某些元素，不起作用

print content of a div except some element in it, doesnt work

javascript

hide

print-preview