My external print css is not applying though I have passed link in print function using jQuery please can any one tell me how to apply external CSS

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

Solution

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.

<!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"><style>@include print.css; </style></head>');
            w.document.write('<body >');
            w.document.write(divContentss);
            w.document.write('</body></html>');
            console.log(w.document);
            setTimeout(
              function () {w.print();
                w.close();}, 1000)
        });
        })
    </script>
</head>
<body>
    <button id="print">Print</button>
    <div id="Display">
        <h1 class="test">This is a test</h1>
    </div>

</body>
</html>