html - 格式化 HTML 报告以供打印

Question

我有一个 HTML“报告”页面，其中包含一个如下所示的 HTML View :

不过，当您打印预览时，它看起来就不那么漂亮了:)

我知道用于打印的 CSS，但我不明白我的 HTML 是如何被这样解释的——例如，为什么我的蓝色边框很好，但我的彩色框(实际上只是里面的空 div) td 单元格)根本不会出现在打印预览中。还有，为什么左边的黑底白字打印不出来呢？

打印友好的 css 是否有一些规则？这里有什么建议吗？

顺便说一句 - 我尝试在 IE 10 和 chrome 中预览 - 两者的效果几乎相同

Answer 1

我猜这个问题与许多浏览器(打印时)默认忽略的“背景颜色”和“背景图像”属性有关。

对于 chrome，您可以将以下代码添加到您的打印 css，在 firefox 和 IE 中，您必须在打印对话框中选择“打印背景”。

:root {
  -webkit-print-color-adjust: exact;
}

编辑:另一种方法

由于您正在寻找一种在打印机上也提供可读信息的方法，您可以为此提供特定内容:

在您的 HTML 中:

<td class="green_background blue_border">
    <img src="img/green_bk.png" class="show_on_print">
</td>

<td class="orange_background blue_border with_star">
    <img src="img/orange_with_star_bk.png" class="show_on_print">
    <span class="hide_on_print">*</span>
</td>

在你的样式表中:

@media screen,print 
{
    .blue_border {border: 1px solid #00F;}
}

@media screen
{
   .green_background {background-color: #0F0;}
   /* hide something when displayed on screen */
   .show_on_print {display: none;}
}

@media print
{
    img.show_on_print {/* add size, etc. */}
    .hide_on_print {display: none;}
}

您还必须创建图像。这个想法是用一些小 Sprite 替换背景，或者只在打印机上替换文本。这适用于任何浏览器