Currently using angular 4 and in need of a feature that allows the user to print a specific section of data. Although I have successfully implemented a bootstrap print preview, the issue arises when no colors are displayed in the preview. This problem persists across different browsers like Chrome and Safari - even after enabling background colors on Safari, the colors fail to show up.
https://i.sstatic.net/hs578.png
The left half of the screenshot displays the expected colors, while the right side shows the colorless print preview version.
A similar occurrence happens when attempting to print directly from the application itself by right-clicking. Other websites display colors perfectly fine in their print previews.
https://i.sstatic.net/fis2A.png
The current "print" function (originally sourced from a stack overflow post) is as follows:
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();
}
The HTML content being displayed in the print window is as follows:
<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>
Despite trying multiple solutions found on stack overflow, none seem to solve the issue at hand, leaving me stuck with no clear resolution.