Question

我正在一个页面上，用户可以点击按钮并在页面上打印一些重要信息。

基本页面结构如下：

<body>

    <div id="printContent"></div>

    <button>Print</button>

</body>

所需的行为是：打印页面时，只打印“printContent”内的内容。

之前我使用js代码通过临时用printContent内部的任何内容替换主体来实现它，但是当用户离开打印选项弹出窗口时，这似乎会使页面变慢。（临时内容将占用整个页面几秒钟，或者某些按钮和链接在几秒钟内无响应。）所以在这里提到第二个答案后：How do I print part of a rendered HTML page in JavaScript?

我使用过这样的东西：

@media print {
  body * {
    display:none;
  }

  body #printContent {
    display:block;
  }
}

但是在打印时，printContent部分仍然是不可见的。我这里做错了吗？感谢。

编辑：我的不好，这不是链接中的第二个答案，第二个“最高评价答案”，即有15个赞成票的答案。

Answer 1

好的，也许很多子元素也会受到影响。试试这个：

@media print {
  body * {
    display:none;
  }

  body #printContent {
    display:block;
  }

  body #printContent * {
    display:initial;
  }
}

从技术上讲，您也在重置内部内容的display。你明白吗？当您提供全局选择器body *时，它还会隐藏内部组件。因此，取消隐藏父#printContent将不足以取消隐藏它的孩子。为避免所有这些麻烦，如果#printContent是body的直接后代，您可以执行以下操作：

@media print {
  body > * {
    display:none;
  }

  body > #printContent {
    display:block;
  }
}

使用CSS打印网页的一部分

1 个答案: