Here below is my HTML and CSS and jQuery code; both test.html and print.css both are in same folder while testing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<title>Document</title>
<script>
$(document).ready(function(){
$('#print').click(function () {
var divContentss = $('#Display').html();
var w = window.open();
$(w.document.body).html(divContentss);
w.document.write('<html><head><link rel="stylesheet" href="print.css"></head>');
w.document.write('<body >');
w.document.write(divContentss);
w.document.write('</body></html>');
console.log(w.document);
w.print();
w.close();
});
})
</script>
</head>
<body>
<button id="print">Print</button>
<div id="Display">
<h1 class="test">This is a test</h1>
</div>
</body>
</html>
Here is my print.css file
.test{
color:red;
font-size:60px;
}
I am trying to use external print CSS to invoke on clicking print button
I think your problem is that the css file hasn't had any time to load so the print function is entered before it's had time to take effect.
This code is a copy of yours with just a timeout added. I've given it a second which is hopefully rather over generous - depends on your serving environment, users network etc of course as to what the minimum you can get away with is.