Encountering issues with printing output in an opened window using JavaScript. I'm creating a new document through window.open and including CDN links to Bootstrap files. While everything appears fine in the opened window, when attempting to print (XPS document writer), some styles such as .btn-group are present but layout or inline styles are missing.
Question: How can I print exactly what I see in the new window?
In the CDN link, I have specified media='all' (also tried media='print').
Working example: Check out the jsfiddle here
$('#openNewWindow').click(function(e){
var printWindow = window.open('', '_blank', 'width=1100, height=500');
printWindow.document.open();
printWindow.document.write("<!doctype html><head><title>Title</title>");
var cdn = `
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" media="all" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" media="all" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
`;
printWindow.document.write(cdn);
printWindow.document.write("</head><body>");
content = `
<div class="container-fluid">
<div class="row">
<div class="col-md-8" style="background-color: red">.col-md-8</div>
<div class="col-md-4" style="background-color: blue">.col-md-4</div>
</div>
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
`;
printWindow.document.write(content);
printWindow.document.write('</body></html>');
printWindow.document.close(); // necessary for IE >= 10
printWindow.focus(); // necessary for IE >= 10*/
setTimeout(function () {
printWindow.print();
},1000)
});