gpt4 book ai didi

html - 将打印区域限制为一个 div

转载 作者:太空狗 更新时间:2023-10-29 15:32:32 24 4
gpt4 key购买 nike

有没有办法在 Windows 的 IE8 中仅使用 css(而非 javascript)打印嵌套的“id=printarea”div(带有样式)?

<div id="main">
This should NOT be shown in Print Preview
<div id="printarea">ONLY this should be shown in Print Preview
<table><tr><th>one</th><th>one</th></tr><tr><td>one</td><td>one</td></tr></table></div>
</div>

我试过使用 css,但由于继承,它(显然)什么也不显示。下面的例子表明了我的意图。

@media print {
* { display:none; }
#printarea { display:block; }
}

我已经成功地使用了 javascript(有效),但我不认为它是一个优雅的解决方案,因为我必须在 document.write 中引入所有 css 导入和样式 block 。

function printDiv(divId){
var divToPrint = document.getElementById(divId);
newWin= window.open();
newWin.document.write('<style>table,tr,td,th{border-collapse:collapse;border:1px solid black;}</style>');
newWin.document.write(divToPrint.innerHTML);
newWin.document.close();
newWin.focus();
newWin.print();
newWin.close();
}

示例: http://jsfiddle.net/D7ZWh/2/

相关: Overriding parent's CSS display property

最佳答案

您必须将所有其他内容放入 html 元素中(注意 p 标签)

<body>
<p>This should NOT be shown in Print Preview</p>
<div id="main">
<p>This should NOT be shown in Print Preview</p>
<div id="printarea">ONLY this should be shown in Print Preview</div>
</div>
</body>

然后您可以将所有其他元素隐藏在父级之下。为层次结构中的每个父级执行此操作

@media print {
body *, #main * { display:none; }
#main, #main #printarea, #main #printarea * { display:block; }
}

编辑:

这与 printing only one div 的第二个答案非常相似

关于html - 将打印区域限制为一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20364212/

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