Bootstrap 3.x打印预览背景色与文字显示异常的解决

1. 问题描述

在使用 Bootstrap 3.x 进行页面开发时，我们可能会遇到打印预览中背景色与文字显示异常的问题。具体表现为：

• 背景色未被打印；
• 文字被截断或是部分未被显示。

这是因为 Bootstrap 3.x 中默认有一些 CSS 样式会影响打印预览的效果，但我们可以通过以下方式来解决问题。

1. 解决方案

为了实现标准的打印预览效果，我们需要定义打印样式表，并在 HTML 中引入它。我们可以在样式表中重置一些 CSS 样式，以达到预期效果，具体步骤如下：

1. 创建打印样式表文件，并在 HTML 中引入。

<link rel="stylesheet" type="text/css" href="print.css" media="print">

1. 在打印样式表文件中定义重置样式。

@media print {
  /* 重置背景色与背景图片 */
  body, * {
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  /* 隐藏不需要打印的元素 */
  @page {
    size: auto;
    margin: 0mm;
  }
  .no-print, .no-print * {
    display: none !important;
  }
}

在这个样式表中，我们使用 @media print 媒体查询来定义打印样式。其中，我们通过 background: transparent !important 来重置背景色与背景图片。

1. 在 HTML 中指定需要打印的部分。

<div class="printable">需要打印的内容</div>

在开发中，我们常常需要控制需要打印的部分。为了实现这个功能，可以在 HTML 文件中使用 .printable 类来指定需要打印的内容。在样式表中，我们同样可以使用 .no-print 类来隐藏不需要打印的元素。

1. 测试打印功能。

在浏览器中打印预览功能，即可看到打印预览已经正常显示了。

1. 示例说明

以下是两条示例说明：

示例一：打印页面中的表格

在页面中，我们通常会使用表格展示数据。如果需要打印表格，并确保表格中的背景色能够正确显示，我们就需要使用以上的三个步骤来解决问题。如果表格过长，则也可以使用 .no-print 类来隐藏表格的一部分，保证打印效果符合预期。

示例二：打印页面中的图表

如果需要打印页面中的图表，我们同样可以使用以上的三个步骤来解决问题。如果图表背景色与文字显示异常，则使用样式表中的重置样式即可，具体表现为 background: transparent !important; 和 color: inherit !important;。另外，为了打印效果更加美观，我们也可以使用 .no-print 类来隐藏一些不必要的元素，比如图表下面的说明文字等。