Div的background-image及叠加图片在打印预览中不显示求助

1. 强制浏览器打印背景图像 #

浏览器默认会禁用背景图打印，必须通过CSS强制开启。在你的样式中添加打印媒体查询：

@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  #canvasSaved {
    background-image: url('images/kacid.jpg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
  }
}

2. 修复克隆窗口的图片路径问题 #

把元素克隆到新空白窗口时，相对路径的图片会基于空白页URL加载，导致资源找不到。两种解决办法：

方法A：转绝对路径

用PHP动态生成绝对路径，确保新窗口能正确加载图片：

<!-- 背景图修改 -->
<div id="canvasSaved" class="canvasSaved col-lg-12" style="background-image: url('<?php echo 'http://' . $_SERVER['HTTP_HOST'] . '/images/kacid.jpg'; ?>'); background-size: contain; background-repeat: no-repeat; width: 100%; height: 512px; position: relative;">

<!-- 员工照片修改 -->
<img src="<?php echo 'http://' . $_SERVER['HTTP_HOST'] . '/images/employees/empPhotos/' . $staffno.'.jpg'; ?>" 
     style="position: absolute; bottom: 101px; right: 6px; width: 199px; height: 225px; object-fit: cover; font-size: 26px;">

方法B：用html2canvas生成图片后打印（更可靠）

你已经引入了html2canvas，直接把整个canvasSaved转成canvas图片再打印，彻底规避路径和背景打印限制：

document.getElementById("printButton").onclick = function() {
  printContent();
};

function printContent() {
  html2canvas(document.getElementById("canvasSaved")).then(canvas => {
    const printWindow = window.open('', '', 'width=800,height=600');
    const img = document.createElement('img');
    img.src = canvas.toDataURL('image/png');
    img.style.width = '100%';
    printWindow.document.body.appendChild(img);
    
    img.onload = () => {
      printWindow.print();
      printWindow.close();
    };
  });
}

3. 给新窗口添加基础样式（克隆元素方案必备） #

如果坚持用克隆元素的方法，必须给新窗口的body加样式，避免布局混乱导致图片隐藏：

function printContent() {
  var printableContent = document.getElementById("canvasSaved").cloneNode(true);
  var printWindow = window.open('', '', 'width=800,height=600');
  
  printWindow.document.head.innerHTML = `
    <style>
      body { margin: 0; padding: 20px; }
      @media print {
        * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
      }
    </style>
  `;
  
  printWindow.document.body.appendChild(printableContent);
  printWindow.print();
  printWindow.close();
}

总结 #

优先用html2canvas方案，它能把整个元素（背景图、叠加图、输入框内容）转成一张图片，完全不受浏览器打印设置干扰，兼容性最好。如果不想用canvas，就同时开启背景打印+修复图片绝对路径。

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