使用window.print导出PDF首次打印背景水印图不显示问题求助

该问题是因为浏览器默认不会预加载仅在print媒体查询中引用的资源，首次点击打印按钮时，浏览器才开始发起水印图片的请求，图片加载完成前打印预览已经渲染完成，所以首次看不到水印；第二次点击时图片已经缓存，就能正常显示。

以下两种方案任选一种即可解决：

方案1：预加载水印图片（最简单，兼容性最好） #

提前在页面全局加载水印图片，不让浏览器等到触发打印时才请求，两种实现方式可选：

• 方式A：HTML中添加隐藏的预加载标签

<!-- 放在页面任意位置，不会显示，仅用于提前加载水印图 -->
<img src="/Areas/Adam/Content/bc.png" style="display: none;" alt="水印预加载">

• 方式B：全局CSS预加载，无需额外HTML元素

/* 放在非print媒体的全局CSS中 */
body::after {
  content: url(/Areas/Adam/Content/bc.png);
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
}

方案2：修改打印触发逻辑，等图片加载完成后再打印 #

把原来按钮直接触发window.print()的逻辑调整为异步加载图片完成后再触发打印：

1. 修改按钮代码，移除原有onclick属性：

<div class="floating-button noprint">
  <button class="btn btn-primary noprint" id="pdf">PDF</button>
</div>

2. 添加对应JS逻辑：

document.getElementById('pdf').addEventListener('click', function() {
  const watermark = new Image();
  watermark.src = '/Areas/Adam/Content/bc.png';
  // 图片加载完成后再触发打印
  watermark.onload = () => window.print();
  // 兜底逻辑：图片加载失败也正常触发打印，避免点击无反应
  watermark.onerror = () => window.print();
  return false;
});

1. 你提供的CSS代码中@@media和@@page是语法错误，需要修改为单个@才能正常生效：

/* 正确写法 */
@media print {
  /* 原有print样式不变 */
}
@page {
  /* 原有page样式不变 */
}

2. 原有body::before使用position: absolute的话，页面超过一屏时水印只会出现在第一页，建议修改为position: fixed，就能在所有打印页面都显示水印，还可以根据需求添加background-repeat: repeat实现多页重复水印效果。
3. 确认浏览器打印设置中的「打印背景色和图像」选项已开启，部分浏览器默认关闭该选项会导致所有背景图无法打印。

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