html - 我无法让任何元素在打印预览中显示颜色

我正在使用 Angular 4，需要让用户能够打印一部分数据。我可以用 Bootstrap 正常生成打印预览，但是在显示预览时完全没有颜色显示。我在 Chrome 和 Safari 中得到了同样的结果，即使在 Safari 中勾选了打印背景颜色，颜色仍然没有显示出来。

截图的左侧是应该显示的颜色，右侧是打印预览显示的颜色。

我还发现，当我右键点击并选择打印时，单独使用常规应用程序本身也会出现同样的情况。其他网站在打印预览中显示彩色完全正常。

这是我的打印函数（现在基本上是从另一个 Stack Overflow 问题中借用的，我计划以后会更改它。）

print(): void {
    let printContents, popupWin;
    printContents = document.getElementById('print-section').innerHTML;
    popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
    popupWin.document.open();
    popupWin.document.write(`
      <html>
        <head>
          <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
          <title>Print tab</title>
          <style>
            .lightBlue {
              background-color: lightblue !important;
            }

            @media print {
              .lightBlue {
                background-color: lightblue !important;
                -webkit-print-color-adjust: exact;
              }
            }
          </style>
        </head>
    <body onload="window.print();window.close()">${printContents}</body>
      </html>`
    );
    popupWin.document.close();
  }

这是在打印窗口中显示的HTML：

<div id="print-section" [hidden]="printable">
  <div class="container">
    <h1>Location Report for {{showOnly}}s</h1>
    <br/>
    <table class="table table-bordered">
      <thead class="lightBlue">
        <tr>
          <th >Dog</th>
          <th>Location</th>
        </tr>
      </thead>
      <tbody>
        <tr>

        </tr>
      </tbody>
    </table>
  </div>
</div>

我在 Stack Overflow 上尝试了很多解决方案，但都没有成功，所以我现在有点无从下手。

答案＃1

好了，我弄明白了。是 Bootstrap 导致颜色无法显示。它还导致我的全局 CSS 文件无法工作。使用 Bootstrap 4 而不是 3 似乎解决了第二个问题，不过打印问题仍然存在。所以我决定对于需要打印的文件就不使用 Bootstrap。