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

【问题标题】：I can't get any elements to display color in print preview我无法让任何元素在打印预览中显示颜色
【发布时间】：2018-03-26 22:21:42
【问题描述】：

我正在使用 angular 4 并且需要用户能够打印一段数据。我可以通过引导程序正常工作来获得打印预览，但是，当我显示预览时，没有任何颜色显示。我在 chrome 和 safari 中得到了相同的结果，即使在 safari 中检查了背景颜色，颜色仍然不显示。

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

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

这是我的打印功能（现在几乎是从另一个堆栈溢出问题中提取的，我计划稍后更改。）

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>

我已经尝试了很多关于堆栈溢出的解决方案，但我没有一个可以工作，所以我现在有点不知所措。

【问题讨论】：

您确定这不仅仅是浏览器设置打印背景颜色的问题吗？ “常规应用程序本身”的屏幕截图确实有颜色，只是没有背景颜色。
没错，我在 Safari 中得到了相同的结果，即使选中了背景颜色框。可打印中的那个条实际上是我唯一需要有颜色的东西，其他一切都是黑白的。如果我能以某种方式欺骗该元素使其具有颜色，那对我有用。
有什么方法可以在打印文档之前将.scss 文件放入图片中？
this could be the issue，尝试在浏览器中启用print background选项。
div background color in print page doesn't work的可能重复

标签： html css twitter-bootstrap angular typescript

【解决方案1】：

好吧，我想通了。 Bootstrap 导致颜色不显示。这也导致我的全局 css 文件无法工作。使用 bootstrap 4 而不是 3 似乎已经解决了第二个问题，但是打印问题仍然存在。所以我不会对需要打印的文件使用引导程序。

【讨论】：