html - 格式化 HTML 报告以进行打印

Question

我有一个 HTML“报告”页面，其中包含一个 HTML 视图，如下所示：

但是，当您打印预览时，它看起来不太好:)

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

打印友好的 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;}
}

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

Answer 2

您看不到彩色框的原因是因为颜色是通过background-color. 这是过去打印 HTML 问题的主要来源之一，因此许多浏览器会忽略背景颜色和图像以使打印输出更具可读性（当黑白打印机位于“灰色”区域顶部时，文本很难阅读）。

在您的情况下，这是有问题的，因为没有文本。

这是一个问题，它解释了如何在 Chrome 中打开背景颜色打印。其他浏览器在打印对话框中有一个选项。

或者，将页面“打印”成 PDF 文件，然后使用 PDF 查看器进行打印。在这种情况下，浏览器可能会保留后台设置。

Answer 3

检查您的浏览器是否在打印时抑制背景颜色。