隐藏除一个格打印检视所有元素

我已经为我的打印样式下面的CSS：隐藏除一个格打印检视所有元素

* { 
display:none; 
} 

#printableArea { 
display:block; 
}

我预计这个隐藏所有元素，并且只显示printableArea，但是一切得到隐。在打印视图中，我得到的只是一个空白页面。

我已将它正确地包含在HEAD中，并在此特定样式表上使用media="print"。

如果一个元素没有显示，那么它的子元素将不会显示（不管他们的显示属性是什么）。

*匹配<html>元素，因此整个文档都是隐藏的。

您需要对隐藏的内容更具选择性。

2009-10-02 20:56:15 Quentin

啊，谢谢！我想我可以将printableArea放在页面包装器外面，然后隐藏包装器，显示打印格。 – FatherCarbon 2009-10-02 21:10:57

@FatherCarbon - 这就是我刚刚实现的，它看起来好像会诀窍 – Michael12345 2014-03-28 22:08:21

html body * { 
display:none; 
} 

#printableArea { 
display:block; 
}

此外，您可能需要！重要#printableArea，但可能不需要。

2009-10-03 08:33:14 PHLAK

+19

这只会在#printableArea是身体的直接子节点时才起作用。 – 2010-04-09 04:01:45

如果要使用JavaScript，你可以试试这个简单的片段，甚至不需要jQuery的：

document.body.innerHTML=document.getElementById('printableArea').innerHTML;

2011-01-18 14:59:18 Chad

此操作将替换整个HTML，而不是必需的结果 – 2013-03-11 14:37:16

你可以尝试弹出它的一切之上。这解决了我90％的问题，然后我只需要制作一个.noprint类，并将它添加到一些零散的元素中。

.print_area{ 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    z-index: 9999; 

    background-color: #ffffff; 
}

2015-12-09 18:23:49

你采取正确的一般方法，但要使用的visibility: hidden代替display: none，使您可以设置子元素是可见的。

2016-02-02 23:58:59

回答