使用JavaScript调用print()打印页面时如何正确加载原页面CSS样式

你的代码存在4个致命问题，导致样式无法加载：

• 文档写入顺序完全错误：先写入了表单div的内容，之后才写入<html>、<head>、<body>标签，最终生成的DOM结构不符合规范，浏览器无法正确解析头部的样式引用
• link标签转义错误：代码中media=\\\"all\\\"的写法会生成带多余反斜杠的无效属性，浏览器无法识别该样式标签
• 固定延迟逻辑不可靠：写死1秒延迟无法适配不同网络速度，CSS未加载完成时就会触发打印
• 相对路径解析错误：新窗口默认地址是about:blank，用css/css.css这种相对路径会被解析为about:blank/css/css.css，根本找不到对应样式文件

方案1：写入规范HTML结构，监听资源加载完成后打印 #

按标准HTML结构顺序写入内容，使用绝对路径引用CSS，监听页面加载完成事件触发打印，无需写死延迟时间：

function printform(formId){
    const printContent = document.getElementById(formId).outerHTML;
    // 替换为你自己的CSS文件绝对路径，以/开头从网站根目录寻址
    const cssPath = '/css/css.css';
    const newWin = window.open('', '_blank');

    newWin.document.write(`
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>打印表单</title>
    <link rel="stylesheet" href="${cssPath}" media="all">
</head>
<body>
    ${printContent}
</body>
</html>
    `);
    // 必须调用close关闭文档流，否则部分浏览器不会触发资源加载
    newWin.document.close();

    newWin.onload = function() {
        newWin.focus();
        newWin.print();
        newWin.close();
    }
}

注意事项：

• CSS路径必须使用根路径开头的绝对路径，禁止使用相对路径
• 写入完所有内容后必须调用newWin.document.close()，兼容Edge、IE等浏览器
• 用onload事件替代固定setTimeout延迟，确保所有资源加载完成后再触发打印

方案2：内联所有样式，彻底规避外部资源加载问题 #

如果遇到跨域样式、路径解析异常的问题，可以直接提取当前页面的所有CSS规则内联到新窗口，不需要加载外部文件，样式还原度100%：

function printform(formId){
    const printContent = document.getElementById(formId).outerHTML;
    // 提取当前页面所有可用CSS规则
    let pageCss = '';
    for (const styleSheet of document.styleSheets) {
        try {
            for (const rule of styleSheet.cssRules) {
                pageCss += rule.cssText;
            }
        } catch (err) {
            // 跨域引入的外部样式会触发权限错误，直接跳过即可
        }
    }

    const newWin = window.open('', '_blank');
    newWin.document.write(`
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>打印表单</title>
    <style>${pageCss}</style>
</head>
<body>
    ${printContent}
</body>
</html>
    `);
    newWin.document.close();

    newWin.onload = function() {
        newWin.focus();
        newWin.print();
        newWin.close();
    }
}

该方案不存在外部资源加载失败的问题，兼容性最好，适合对打印样式还原度要求高的场景。

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