使用 CSS 打印文档

引言

当我们需要打印一份文档时，该怎么做？也许你会打开一个带有与当前文档相同模板的新弹出窗口，但该弹出窗口没有按钮、图像、栏和其他内容。当你打开新窗口时，你会再次访问数据库（如果你有的话），这意味着你需要执行更多步骤。我们将看看如何以良好的状态避免这种情况。

假设我们有以下表格

<table>
  <tr>
    <td>Navigate</td>
    <td>Content</td>
    <td><input type="button" value="ok"></td>
  </tr>
</table>

现在我们只想打印内容单元格并隐藏其他单元格。我将为此任务创建一个新的 CSS 样式

<style media="screen">
  .noPrint{ display: block; }
  .yesPrint{ display: block !important; }
</style> 
<style media="print">
  .noPrint{ display: none; }
  .yesPrint{ display: block !important; }
</style>

现在我只需要将这个类添加到我的控件或表格单元格（以及行）

<table>
  <tr>
    <td class="noPrint">Navigate</td>
    <td class="yesPrint">Content</td>
    <td>My button is hidden <input type="button" value="ok" class="noPrint"></td>
  </tr>
</table>

如你所见，你也可以将你的 CSS 类添加到按钮中。在浏览器中打开此文件。我们会看到“导航”、“内容”和按钮。现在转到浏览器的打印预览，看看会发生什么。 “内容”和按钮消失了（隐藏了），我们可以设置按钮进行打印。

<table>
  <tr>
    <td class="noPrint">Navigate</td>
    <td class="yesPrint">Content</td>
    <td>My button is hidden <input type="button" 
          value="Print" class="noPrint" onclick="window.print();"></td>
  </tr>
</table>

运行你的页面并点击打印。就这样了...