我想打印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>
我在jsfiddle中提供了一个示例: sample link
最佳答案
实际上,使用window.open
新创建的窗口没有附加任何样式。
这是一个快照
可以通过在下面的代码中添加内联样式来添加样式
printWindow.document.write('<html><head><style media="print">' +
'p {color: green;}.noprint {display: none !important;}</style><title>DIV Contents</title>');
关于javascript - 打印 div 的内容(除了其中的某些元素)不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48118319/