如何在打印网页时如何隐藏某些元素？

在网页设计中，我们常常需要确保页面在打印时的布局与在线浏览时不同。有些元素，比如导航栏、广告或者其他不适合打印的组件，我们在打印版面上通常会选择隐藏。要在打印网页时隐藏某些元素，我们可以使用CSS的媒体查询功能来实现。

以下是一个基本的步骤和示例，说明如何通过CSS隐藏不需要打印的元素：

1. 定义媒体查询

使用@media print媒体查询来为打印定义特定的CSS规则。这些规则只会在用户尝试打印页面时应用。

css
@media print {
  /* 在这里编写打印时的CSS规则 */
}

2. 隐藏不必要的元素

在@media print块内，可以选择性地为不需要打印的元素设置display: none;规则，这样这些元素在打印预览和打印输出中就不会显示。

css
@media print {
  .navigation, .sidebar, .footer {
    display: none;
  }
}

在上面的例子中，.navigation、.sidebar 和 .footer 类选择器的元素将在打印时被隐藏。

3. 调整打印布局

在某些情况下，除了隐藏特定元素外，我们还需要调整剩余内容的布局，以确保打印输出的格式正确。

css
@media print {
  .content {
    width: 100%;
    margin: 0;
    padding: 0;
  }
}

在这个例子中，.content 类的元素在打印时会被调整为占据全部可用宽度，并且移除外边距和内边距。

示例代码

将以下CSS代码添加到你的网页中，以隐藏.navigation类的元素并调整内容宽度，仅在打印时适用：

css
@media print {
  .navigation {
    display: none;
  }
  
  .content {
    width: 100%;
    margin: 0;
    padding: 0;
  }
}

记得，为了保证打印样式的正确应用，你需要在HTML文档的<head>标签内正确链接你的CSS文件，或者直接将样式嵌入到<style>标签中。

以上即是如何在打印网页时通过CSS隐藏某些元素的方法。这种方式允许我们为打印提供一个更清晰、更专注于内容的版本，同时保留网页本身的功能性和设计美感。

2024年6月29日 12:07 回复

在您的样式表中添加：

shell
@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

然后class='no-print'在 HTML 中添加您不希望出现在打印版本中的内容（或将非打印类添加到现有的类语句中），例如您的按钮。

2024年6月29日 12:07 回复

Bootstrap 3 有自己的类，称为：

shell
hidden-print

它的定义如下：

shell
@media print {
  .hidden-print {
    display: none !important;
  }
}

您不必自己定义它。

在Bootstrap 4和Bootstrap5中，这已更改为：

shell
.d-print-none

2024年6月29日 12:07 回复

最佳实践是使用专门用于打印的样式表，并将其media属性设置为print。

在其中显示/隐藏要打印在纸张上的元素。

shell
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

2024年6月29日 12:07 回复

这是一个简单的解决方案，将这个CSS

shell
@media print{
   .noprint{
       display:none;
   }
}

这是 HTML

shell
<div class="noprint">
    element that need to be hidden when printing
</div>

2024年6月29日 12:07 回复

CSS文件

shell
@media print
{
    #pager,
    form,
    .no-print
    {
        display: none !important;
        height: 0;
    }


    .no-print, .no-print *{
        display: none !important;
        height: 0;
    }
}

HTML 标题

shell
<link href="/theme/css/ui/ui.print.css?version=x.x.x" media="print" rel="stylesheet" type="text/css" >

元素

shell
<div class="no-print"></div>

2024年6月29日 12:07 回复

6个答案

1. 定义媒体查询

2. 隐藏不必要的元素

3. 调整打印布局

示例代码

你的答案