gpt4 book ai didi

javascript - 打印 div 的内容(除了其中的某些元素)不起作用

转载 作者:行者123 更新时间:2023-12-01 02:33:38 25 4
gpt4 key购买 nike

我想打印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新创建的窗口没有附加任何样式。

这是一个快照

Snapshot of the newly created window

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

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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com