jQuery打印功能中外部print.css未生效，求解决方案

问题根源 #

• 重复写入DOM内容：代码里先执行$(w.document.body).html(divContentss)给新窗口塞内容，随后又用document.write重新构建整个HTML文档，这步操作完全覆盖了之前的内容，属于冗余操作，还可能干扰文档解析。
• CSS未加载完成就打印：外部CSS文件需要时间加载解析，刚写完文档就立刻调用w.print()，此时浏览器还没来得及应用样式，导致打印内容没有样式效果。

修复方法 #

1. 删掉冗余的$(w.document.body).html(divContentss)代码，避免重复操作干扰。
2. 等待外部CSS加载完成后再触发打印，通过监听CSS的onload事件实现，同时加个定时器作为兼容备用方案。
3. 规范新窗口的文档构建流程，写完后记得关闭文档写入，让浏览器正常解析。

修复后的完整代码 #

HTML/jQuery部分

<!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();
                
                // 构建完整的HTML结构，引入打印样式
                w.document.write('<html><head><link rel="stylesheet" href="print.css" id="printStyle"></head>');
                w.document.write('<body>');
                w.document.write(divContentss);
                w.document.write('</body></html>');
                w.document.close(); // 关闭文档写入，触发浏览器解析
                
                // 监听CSS加载完成事件，加载完成后打印
                var printStyle = w.document.getElementById('printStyle');
                printStyle.onload = function() {
                    w.print();
                    w.close();
                };

                // 兼容部分不触发onload的浏览器，延迟打印
                setTimeout(function() {
                    w.print();
                    w.close();
                }, 500);
            });
        })
    </script>
</head>
<body>
    <button id="print">Print</button>
    <div id="Display">
        <h1 class="test">This is a test</h1>
    </div>
</body>
</html>

print.css部分（保持不变）

.test{
    color:red;
    font-size:60px;
}

内容的提问来源于stack exchange，提问作者sumit dubey