iframe打印未加载CSS，如何强制浏览器加载打印样式？

这个问题我之前也碰到过，iframe打印时样式丢失通常是因为打印上下文没有正确加载样式，或者浏览器的默认打印样式覆盖了你的自定义样式。给你几个可行的解决方案：

1. 用打印媒体查询锁定样式 #

浏览器在打印时会优先读取@media print块里的样式，所以你需要把打印专属的样式（或者需要强制生效的样式）放在这个媒体查询里，确保样式能被打印流程识别。

比如在iframe的CSS文件里添加：

@media print {
  /* 重置打印时的默认样式 */
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  body {
    width: 210mm; /* A4宽度 */
    min-height: 297mm;
    padding: 15mm;
    font-size: 12pt;
    font-family: Arial, sans-serif;
  }
  /* 隐藏不需要打印的元素 */
  .no-print {
    display: none !important;
  }
  /* 确保你的自定义样式在打印时生效 */
  .your-custom-class {
    color: #333;
    border: 1px solid #ccc;
  }
}

同时要确保这个CSS文件在iframe的<head>里正确引入，最好指定media="all"让它同时作用于屏幕和打印：

<link rel="stylesheet" href="your-styles.css" media="all">

2. 动态加载样式并等待加载完成再打印 #

如果你的样式是外部文件，有时候打印触发太快，样式还没完全加载就开始渲染了。可以在打印函数里动态添加样式，并等待样式加载完成后再执行打印：

var print = function(){
  // 创建打印样式链接
  var printStyle = document.createElement('link');
  printStyle.rel = 'stylesheet';
  printStyle.href = 'your-print-styles.css';
  printStyle.media = 'print';

  // 样式加载完成后执行打印
  printStyle.onload = function() {
    window.focus(); // 直接聚焦当前iframe窗口即可，无需父窗口聚焦
    window.print();
    // 打印完成后可以移除临时添加的样式（可选）
    document.head.removeChild(printStyle);
  };

  // 添加到iframe的head中
  document.head.appendChild(printStyle);
}

这里补充下：你之前用parent.window.focus()可能会让浏览器聚焦到父窗口，反而打印父窗口的内容，如果目标是打印iframe里的内容，直接聚焦当前iframe的window就好。

3. 确保iframe内容完全渲染后再打印 #

有时候样式没生效是因为iframe的DOM或样式还没完全加载完成。可以在打印前检查文档状态，确保内容就绪：

var print = function(){
  // 检查文档是否加载完成
  if (document.readyState === 'complete') {
    window.print();
  } else {
    // 如果还没加载完，等待DOM加载完成再打印
    document.addEventListener('DOMContentLoaded', function() {
      window.print();
    });
  }
}

4. 跨域场景的特殊处理 #

如果你的iframe和父页面属于不同域名，浏览器的同源策略可能会限制样式的共享。这种情况下，最好把所有打印相关的样式和逻辑都放在iframe内部，不要依赖父页面的资源，确保iframe是一个独立的、样式完整的文档，然后直接在iframe内调用window.print()即可。

额外注意点 #

• 有些浏览器会默认启用“简化打印”模式，可能会忽略部分样式，你可以在浏览器的打印设置里关闭这个选项（比如Chrome的“更多设置”里的“背景图形”要勾选）。
• 测试时多试几个主流浏览器，它们的打印渲染机制略有差异，确保样式在所有目标浏览器里都能正常生效。

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