@media print场景下CTRL-P与window.print()打印QR码显示不一致求助

你遇到的核心问题是：通过CSS @media print 的 body:after 插入带QR码的内容时，用户手动按CTRL-P能正常显示文字和QR图，但通过脚本触发window.print()时仅显示文字，QR图缺失。

浏览器对两种打印触发方式的资源加载处理逻辑存在差异：

• 手动CTRL-P触发时，浏览器会进入打印预览流程，在此过程中会主动等待页面所有关联资源（包括CSS content 中引用的图片）加载完成后再渲染预览内容。
• 脚本触发window.print()时，执行时机可能早于CSS中QR图片的加载完成时间，浏览器直接基于当前已渲染的页面生成预览，此时QR图还未加载完毕，因此无法显示。

方法1：预加载QR图片 #

在页面中添加一个隐藏的img标签，提前加载QR码图片，确保window.print()触发时图片已存在于浏览器缓存中：

<!-- 隐藏的预加载图片，仅用于缓存QR资源 -->
<img 
  src="https://image-charts.com/chart?chs=100x100&cht=qr&chl=https://<?=$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];?>&choe=UTF-8" 
  style="display: none;" 
  alt="QR Code"
>

方法2：延迟执行window.print() #

通过监听QR图片的加载事件，确保图片加载完成后再触发打印，同时添加超时兜底避免加载失败卡住：

function printPage() {
  const qrImage = new Image();
  qrImage.src = 'https://image-charts.com/chart?chs=100x100&cht=qr&chl=https://<?=$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];?>&choe=UTF-8';

  // 图片加载完成后触发打印
  qrImage.onload = () => {
    window.print();
  };

  // 超时兜底，1秒后强制打印（可根据实际调整时长）
  setTimeout(() => {
    window.print();
  }, 1000);
}

将你的“打印友好”按钮绑定这个printPage函数即可。

方法3：替换CSS content实现方式 #

放弃用CSS content 插入内容，直接在页面中添加一个仅在打印时显示的元素，包含文字和QR图，这种方式更稳定，资源加载逻辑更可控：

<!-- 打印专用元素，默认隐藏 -->
<div class="print-footer">
  Convenient QR code to return to this page ...
  <img 
    src="https://image-charts.com/chart?chs=100x100&cht=qr&chl=https://<?=$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];?>&choe=UTF-8" 
    alt="QR Code"
  >
</div>

<style>
/* 屏幕端隐藏 */
@media screen {
  .print-footer {
    display: none;
  }
}

/* 打印时显示，可根据需求调整位置样式 */
@media print {
  .print-footer {
    display: block;
    position: fixed;
    bottom: 20px;
    left: 20px;
  }
}
</style>

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