Blazor Server中JS打印HTML时如何正确引入CSS？

问题1：外部样式表printStyles.css未生效 #

原因 #

1. HTML结构不完整：原代码中打印窗口的HTML缺少<head>和<body>标签的正确包裹，浏览器无法识别<link>标签的合法位置，导致样式不加载。
2. 样式加载时机错误：外部样式表属于异步加载资源，原代码直接在document.close()后调用print()，此时样式文件可能还未加载完成。
3. 路径配置错误：{serverUrl}若未替换为实际站点的正确路径，会导致样式文件404，无法正常加载。

解决办法 #

• 完善HTML结构：将<link>标签放在<head>内，所有打印内容嵌套在<body>中，保证文档结构完整合规。
• 等待资源加载完成再打印：监听打印窗口的onload事件，在所有外部资源加载完毕后执行打印操作。
• 修正样式路径：如果样式文件存放在Blazor项目的wwwroot/css目录下，直接使用相对路径/css/printStyles.css即可（同域场景无需绝对URL）。

问题2：内联CSS影响主页面 #

原因 #

原代码拆分多次调用document.write()，且HTML字符串存在转义错误，导致打印窗口的DOM结构未正确闭合，浏览器误将部分样式解析到主页面的DOM中。

解决办法 #

• 一次性写入完整HTML文档：使用JavaScript模板字符串（反引号）编写完整的打印HTML内容，避免拆分多次document.write()引发的结构错误。
• 取消不必要的转义：模板字符串支持直接写入带引号的HTML属性，无需手动转义"，降低出错概率。

修正后的完整代码 #

JavaScript 代码 #

window.printCard = function (imageBinaryHere) {
    const printWindow = window.open('', '_blank');
    // 编写完整的打印HTML文档，包含标准结构
    const printHtml = `
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>打印卡片</title>
    <!-- 引入外部样式表 -->
    <link href="/css/printStyles.css" rel="stylesheet">
    <!-- 内联打印专属样式，强制背景色打印 -->
    <style>
        body {
            margin: 0;
            padding: 20px;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }
        img {
            max-width: 100%;
        }
    </style>
</head>
<body>
    <!-- 这里放入你的原有HTML内容 -->
    <img src="${imageBinaryHere}" alt="打印图片">
</body>
</html>
    `;

    printWindow.document.write(printHtml);
    printWindow.document.close();

    // 等待所有资源加载完成后执行打印
    printWindow.onload = () => {
        printWindow.print();
        // 延迟关闭窗口，避免部分浏览器打印中断
        setTimeout(() => printWindow.close(), 500);
    };
}

Blazor Server 调用代码 #

protected async Task Print()
{
    // 确保imageBinary是正确的Data URI格式，例如"data:image/png;base64,xxxx..."
    await JsRuntime.InvokeVoidAsync("printCard", imageBinary);
}

额外注意事项 #

• 浏览器默认禁用背景色打印，需添加-webkit-print-color-adjust: exact和print-color-adjust: exact样式强制开启。
• 如果外部样式表加载仍有问题，可直接将样式内容内联到<style>标签中，规避异步加载的不确定性。
• 打印窗口关闭建议延迟执行，部分浏览器在打印未完成时关闭窗口会导致打印失败。

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