为打印视图隐藏除一个div之外的所有元素

Question

我的打印样式有以下CSS:

* {
 display:none;
}

#printableArea {
 display:block;
}

我希望这可以隐藏所有元素,只显示printableArea,但是一切都被隐藏了.在打印视图中,我得到的只是一个空白页面.

我把它包含在HEAD中,media="print"在这个特定的样式表上.

Answer 1

如果未显示元素,则不显示其子项(无论其显示属性设置为何值).

*匹配<html>元素,因此隐藏整个文档.

你需要对你隐藏的东西更有选择性.

Answer 2

您正在采用正确的通用方法,但您希望使用visibility: hidden而不是display: none使您可以将子元素设置为可见.

Answer 3

html body * {
 display:none;
}

#printableArea {
 display:block;
}

此外,您可能需要#printableArea上的!important,但可能不需要.

Answer 4

您可以尝试将其弹出到所有内容之上。这解决了我 90% 的问题，然后我只需要创建一个.noprint类并将其添加到一些零散的元素中。

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

    background-color: #ffffff;
}

Answer 5

如果您想使用 JavaScript，您可以尝试这个简单的代码片段，甚至不需要 jQuery：

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

Answer 6

回答是因为我在搜索这个问题时发现了这个问题

您可以使用 'display: none' 代替：

* {
     visibility: hidden;
     margin:0; padding:0;
    }

    #printableArea * {
      visibility: visible;
    }

这是可行的，但是如何使“#printableArea”移动到纸张的左上角，而不是保留它在使用“visibility:hidden”保留的 HTML/CSS 结构中的位置？ (2认同)