创建并打开打印页面时CSS样式不生效问题排查

首先看你更新的代码里有个明显的bug：你定义的变量是printData，但调用document.write(data)时用的是data，变量名不匹配，这会直接导致内容无法写入，样式自然无效。先把这个问题修正——把data换成printData。

除此之外，即便变量名正确，原写法仍可能因为外部CSS还未加载完成就触发打印导致样式失效。你写完文档后立刻调用print()，此时浏览器可能还没来得及请求、解析外部样式表，自然没法把样式应用到元素上。

给你几个可行的解决办法：

• 等待样式表加载完成后再打印
  给link标签添加加载事件监听，等样式加载完毕再触发打印：

  let printWindow = window.open('', 'Print', 'height=600,width=800');
  printWindow.document.write('<html><head><title>Print</title>');
  // 创建link元素并监听加载事件
  const link = printWindow.document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'https://my.website/css/mystylesheet.css';
  link.type = 'text/css';
  link.onload = function() {
      printWindow.focus();
      printWindow.print();
      printWindow.close();
  };
  printWindow.document.head.appendChild(link);
  printWindow.document.write('</head><body><p id="test">Hello</p></body></html>');
  printWindow.document.close();
  

• 内联CSS样式
  如果外部样式表内容不多，直接把样式写到打印窗口的style标签里，规避外部加载的问题：

  let printWindow = window.open('', 'Print', 'height=600,width=800');
  printWindow.document.write(`<html><head><title>Print</title>
  <style>
  #test {
    color: green;
  }
  </style></head><body><p id="test">Hello</p></body></html>`);
  printWindow.document.close();
  printWindow.focus();
  // 轻微延迟确保样式生效
  setTimeout(() => {
      printWindow.print();
      printWindow.close();
  }, 100);
  

• 确保样式表支持打印媒体
  检查你的CSS链接是否指定了media属性，如果仅针对screen，打印时可能不生效。可以修改为：

  <link rel="stylesheet" href="https://my.website/css/mystylesheet.css" type="text/css" media="print, screen" />
  

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