使用JavaScript打印DIV时无法渲染CSS背景图的技术求助

嘿，这个问题我之前也碰到过！主要是两个核心原因：浏览器默认会忽略打印场景下的背景图像，另外你的打印脚本可能存在CSS加载不及时或路径匹配的问题。下面给你分步解决：

1. 强制浏览器打印背景图（关键步骤） #

为了节省墨水，浏览器默认打印设置会关闭背景图形的渲染。我们可以用CSS强制开启，修改你的IDCard.css文件，添加打印专属的媒体查询：

@media print {
  /* 强制所有元素打印背景色与背景图，适配不同浏览器 */
  * {
    -webkit-print-color-adjust: exact !important; /* Chrome、Safari、Edge */
    color-adjust: exact !important; /* Firefox */
    print-color-adjust: exact !important; /* W3C标准属性 */
  }

  /* 确保目标元素的背景图样式正确生效 */
  .container {
    background-image: url('你的背景图相对/绝对路径'); /* 务必检查路径正确性！ */
    background-size: cover; /* 根据需求调整为contain或具体尺寸 */
    background-repeat: no-repeat;
    /* 补充其他必要的背景样式，比如位置 */
  }
}

2. 优化打印脚本，确保CSS稳定加载 #

原脚本固定500ms超时的方式不够可靠，如果外部CSS加载缓慢，会导致打印时样式未生效。我们可以改为监听iframe的load事件，同时把关键打印CSS内嵌到打印文档中，避免路径匹配问题：

$(function () {
  $("#btnPrint").click(function () {
    var contents = $("#dvContents").html();
    var frame1 = $('<iframe />');
    frame1[0].name = "frame1";
    frame1.css({ "position": "absolute", "top": "-1000000px" });
    $("body").append(frame1);
    
    // 简化iframe文档对象的获取逻辑
    var frameDoc = frame1[0].contentWindow || frame1[0].contentDocument;
    if (frameDoc.document) frameDoc = frameDoc.document;
    
    frameDoc.open();
    // 内嵌打印强制样式+引入外部CSS，双重保障样式生效
    frameDoc.write(`
      <html>
        <head>
          <title>DIV Contents</title>
          <style>
            @import url('IDCard.css');
            @media print {
              * {
                -webkit-print-color-adjust: exact !important;
                color-adjust: exact !important;
                print-color-adjust: exact !important;
              }
            }
          </style>
        </head>
        <body>
          ${contents}
        </body>
      </html>
    `);
    frameDoc.close();
    
    // 等待iframe内容完全加载后再执行打印
    frame1.on('load', function() {
      window.frames["frame1"].focus();
      window.frames["frame1"].print();
      // 打印完成后延迟移除iframe，避免部分浏览器报错
      setTimeout(() => frame1.remove(), 100);
    });
  });
});

额外注意事项 #

• 背景图路径检查：确保背景图路径是相对于当前HTML文件的，使用绝对路径（比如/images/bg.jpg）会更可靠。
• 浏览器备用设置：如果上述方案仍未生效，可以手动检查浏览器打印设置，比如Chrome打印界面的「更多设置」里，勾选「背景图形」选项（不过用CSS强制后一般无需用户手动操作）。

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