格式化HTML报告以进行打印

Question

我有一个HTML"报告"页面,其中包含一个HTML视图,如下所示:

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

我知道用于打印的CSS,但我不明白的是我的HTML是如何被解释的 - 例如为什么我的蓝色边框很好,但我的彩色框(实际上只是td单元格内的空div) )在打印预览中根本不显示.另外,为什么左边黑色的白色文字打印不那样？

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

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

Answer 1

我猜这个问题与"background-color"和"background-image"属性有关,这些属性在许多浏览器上默认被忽略(打印时).

对于chrome,您可以将以下代码添加到print 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;}
}

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