隐藏除一个 div 之外的所有元素以进行打印视图答案

【问题标题】：Hide all elements except one div for print view隐藏除一个 div 之外的所有元素以进行打印视图
【发布时间】：2021-12-08 19:06:41
【问题描述】：

我的打印样式有以下 CSS：

* {
 display:none;
}

#printableArea {
 display:block;
}

我希望这会隐藏所有元素，并且只显示 printableArea，但是一切都被隐藏了。在打印视图中，我得到的只是一个空白页。

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

【问题讨论】：

标签： css

【解决方案1】：

如果一个元素没有显示，那么它的所有子元素都不会显示（无论它们的 display 属性设置为什么）。

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

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

【讨论】：

啊，谢谢！我想我可以将 printableArea 放在页面包装器之外，然后隐藏包装器，显示打印 div。
@FatherCarbon - 这就是我刚刚实现的，看起来可以很好地解决问题

【解决方案2】：

您采用了正确的通用方法，但您想使用 visibility: hidden 而不是 display: none，以便将子元素设置为可见。

见Print <div id=printarea></div> only?

【讨论】：

【解决方案3】：

html body * {
 display:none;
}

#printableArea {
 display:block;
}

此外，您可能需要在 #printableArea 上添加一个 !important，但可能不需要。

【讨论】：

这仅在#printableArea 是body 的直接子代时有效。

【解决方案4】：

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

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

    background-color: #ffffff;
}

【讨论】：

这并没有在我第一次尝试时隐藏其他所有内容。
我无法向下或向上滚动！
@Salem 哇！你在什么纸上打印？
如果您要打印的东西比纸张宽或高，它不会打印到下一页。

【解决方案5】：

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

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

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

    #printableArea * {
      visibility: visible;
    }

来源：https://www.concrete5.org/community/forums/5-7-discussion/need-to-print-a-certain-div-and-ignore-everythign-else-on-the-pa

【讨论】：

这行得通，但是你如何做到让#printableArea 移动到纸张的左上角，而不是保留它在使用visibility:hidden 保留的HTML/CSS 结构中的位置？
我在删除边距和填充时没有这个问题。 Altho，如果你想要它在左边，确保它与左边对齐？您可以始终使其浮动或将其位置更改为绝对位置。此外，如果您点击链接，有人会在特定课程上使用 display: none。这里的问题是，如果你在 * 上执行此操作，选择器 t 将隐藏所有内容，包括你想要打印的内容。
在某些课程上使用display: none 是我最终最终要做的事情。它不像我希望的那样“通用”，但暂时可以使用。

【解决方案6】：

如果你想使用 JavaScript，你可以试试这个甚至不需要 jQuery 的简单 sn-p：

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

【讨论】：

此操作将替换整个 HTML，不是必需的结果
它也可能会破坏。
开箱即用为我工作，没有任何问题。同一站点导致提供的 CSS 方法出现问题。提供的最简单的方法之一。

【解决方案7】：

制作一个 div 包裹 body 标记之后的所有内容。在 wrap div 之前，放置可见项的 div。

我不得不这样做来制作一个简单的用户名密码页面，并且需要隐藏所有内容，除了半透明的登录表单的背景。所以，在输入正确的凭据后，表单会动画出来，半透明的封面也会动画出来，最后，除了所有的东西都会显示出来，你就可以正常使用页面了。

【讨论】：

【解决方案8】：

有一种解决方案：

使用 JQuery

var selector = '';
$(document.head).append($('style').text('*{visibility:hidden}' + selector + '{visibility:visible}'));

没有 JQuery

var selector = '';
document.head.appendChild(Object.assign(document.createElement('style'), { innerText: '*{visibility:hidden}' + selector + '{visibility:visible}' });

在这两个示例中，将selector 变量设置为您想要的选择器。例如，div#page:hover 或 p.class1,p.class2

【讨论】：

【解决方案9】：

@media print {
    * {
        visibility: hidden;
    }

    /* Show element to print, and any children he has. */
    .svgContainer, .svgContainer * {
        visibility: initial;
    }
}

确保所有子元素也可见。请记住，不可见元素仍然会影响页面中其他元素的定位。在我的（简单）案例中，我只是在.svgContainer（其他地方）上添加了position: fixed;。

【讨论】：

【解决方案10】：

您只需使用以下代码并将“隐藏”类分配给您不想在打印页面上显示的特定元素

<style type="text/css" media="print">
    img
    {
        display:none;
    }
    .hide
    {
        display:none;
    }

</style>

【讨论】：

【解决方案11】：

还有另一种干净的方法可以实现这一点：

* {
    visibility: hidden;
}

#printableArea {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

这样您将只在打印视图中获得#printableArea 元素，而所有其他元素都将被隐藏。

【讨论】：