2

I'm using angular 4 and need a user to be able to print a section of data. I can get a print preview with bootstrap working just fine, however, no color shows up whatsoever when I show the preview. I've gotten this same result in chrome and safari, and even with the background colors checked on in safari, the colors still don't show up.

Screenshot

The left side of the screenshot is what color is supposed to show up, the right is what the print preview shows.

I also found that the same thing happens with just the regular application itself when I right click and select print. Other websites show up totally fine with color in print preview.

Screenshot

This is my print function (which right now is pretty much pulled from another stack overflow question, I plan on changing this later.)

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();
  }

This is the HTML is being displayed in the print window:

<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>

I've tried so many solutions on stack overflow and I haven't got any of them to work, so I'm kind of at a loss at this point.

Suraj Rao
  • 29,388
  • 11
  • 94
  • 103
Jeidoban
  • 29
  • 5
  • Are you sure it's not simply a matter of the browser settings for printing background colours? The screenshot to the "regular application itself" does have colours, just no background colours. – Mr Lister Oct 15 '17 at 07:27
  • True, I get the same result in Safari however, even with the background colors box checked. That bar in the printable is literally the only thing I need to have color, everything else is black and white. If I could somehow trick that element into having color, that would work for me. – Jeidoban Oct 15 '17 at 07:33
  • is there any way to bring `.scss` file into picture before printing the doc? – micronyks Oct 15 '17 at 07:42
  • [this could be the issue](https://stackoverflow.com/questions/6553439/div-background-color-in-print-page-doesnt-work), try enabling `print background` option in the browser. –  Oct 15 '17 at 09:38
  • Possible duplicate of [div background color in print page doesn't work](https://stackoverflow.com/questions/6553439/div-background-color-in-print-page-doesnt-work) –  Oct 15 '17 at 09:40
  • I've tried print background color in both safari and firefox (chrome doesn't have it) and I still get the same result. The only difference is now some borders will show up in color when I turn it on, but everything largely remains the same. I also tried using the box shadow trick, but strangely enough only works when I take out the inset, which then colors the entire page and not the div I want colored. – Jeidoban Oct 15 '17 at 17:09
  • Ok I think there is just something straight up wrong with my project. My global stylesheet isn't working either. I ported this project from another project, and I'm thinking something went wrong along the way. I just generated a new angular project and color printing works totally fine in the new project. I'm gonna migrate this project over to a new one file by file and see if that works. – Jeidoban Oct 15 '17 at 18:46

1 Answers1

0

Alrighty, I figured it out. Bootstrap was causing the colors not to show up. It also was causing my global css file to not work. Using bootstrap 4 instead of 3 seems to have solved the second issue, however the printing issue still exists. So I'm just not gonna use bootstrap for files that I need to print.

Jeidoban
  • 29
  • 5