Question

我正在使用角度4并且需要用户能够打印一部分数据。我可以使用bootstrap进行打印预览，但是，当我显示预览时，没有任何颜色显示出来。我在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>

我已经尝试了很多关于堆栈溢出的解决方案，而且我还没有让它们工作，所以我现在有点不知所措。

Answer 1

好吧，我想通了。 Bootstrap导致颜色不显示。它也导致我的全局css文件无法正常工作。使用bootstrap 4代替3似乎已经解决了第二个问题，但是打印问题仍然存在。所以我只是不打算使用bootstrap来打印我需要打印的文件。

我无法在打印预览中获得任何显示颜色的元素

1 个答案: