代码之家 › 专栏 › 技术社区 › user3250818

打印div的内容,但其中的某些元素除外,不起作用

print-preview hide javascript

user3250818 · 技术社区 · 8 年前

我想打印一个div的内容,不想在打印预览中显示该div中的某些元素,我试图在@media print中为这些元素赋予noprint类,但没有成功!请帮忙! 这是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>

我在JSFIDLE中提供了一个示例: sample link

2 回复 | 直到 8 年前

brk 8 年前

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

这是一个快照

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

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

Ivo Facundo 8 年前

我添加这段代码是为了在弹出窗口中渲染之前删除元素,非常简单! 此代码仅通过Jquery的$()之类的查询获取元素,并从父节点中删除面板使用removeChild(element)方法,在本例中是您的div。

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

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前