格式化HTML报告以进行打印

Question

我有一个HTML“报告”页面，其中包含一个看起来像这样的HTML视图：

当你打印预览时，它看起来不太好看:)）

我知道用于打印的CSS，但我不明白的是我的HTML是如何被解释的 - 例如为什么我的蓝色边框很好，但我的彩色盒子（实际上只是里面的空div）一个td单元格）在打印预览中根本不显示。另外，为什么左边黑色的白色文字不会像那样打印？

是否有适合打印的CSS的规则？这里有什么建议？

顺便说一句 - 我尝试在IE 10和Chrome中进行预览 - 几乎都做了相同的

Answer 1

我猜这个问题与“background-color”和“background-image”属性有关，这些属性在许多浏览器上默认被忽略（打印时）。

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

: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问题的主要原因之一，因此许多浏览器忽略背景颜色和图像以使打印输出更具可读性（当B＆amp; W打印机处于“灰色”之上时难以阅读文本“地区”。

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

Here is a question which explains how to turn background color printing on in Chrome。其他浏览器在打印对话框中有一个选项。

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

Answer 3

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