DIV内容打印时添加图片不显示问题求助（附现有代码）

嘿，我来帮你搞定这个打印DIV时图片出不来的坑！你之前的代码思路是对的，但图片不显示大概率是这几个原因：相对路径失效、图片还没加载完就触发打印，或者是新窗口的HTML结构不够完善。下面给你调整后的代码，还有详细的说明：

修正后的完整打印函数 #

function PrintElem(elem) {
  // 先确认要打印的元素存在
  const targetElement = document.querySelector(elem);
  if (!targetElement) {
    alert('找不到要打印的目标元素哦！');
    return;
  }

  // 克隆原元素，避免修改原页面内容
  const clonedElem = targetElement.cloneNode(true);

  // 关键：把图片的相对路径转成绝对路径
  // 因为新窗口是about:blank，相对路径会找不到资源
  const images = clonedElem.querySelectorAll('img');
  images.forEach(img => {
    if (img.src && !img.src.startsWith('http')) {
      img.src = new URL(img.src, window.location.href).href;
    }
  });

  // 打开打印窗口，处理浏览器阻止弹出的情况
  const mywindow = window.open('', 'PRINT', 'height=400,width=600');
  if (!mywindow) {
    alert('浏览器阻止了打印窗口，请允许弹出后重试！');
    return;
  }

  // 写入完整的HTML结构，包含打印样式
  mywindow.document.write(`
    <html>
      <head>
        <title>${document.title}</title>
        <style>
          /* 确保图片在打印页面正常显示 */
          img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 10px 0;
          }
          /* 打印专属样式，优化布局 */
          @media print {
            body {
              margin: 2cm;
              font-size: 12pt;
            }
            /* 如果是背景图片，需要加这两行强制打印 */
            /*
            * {
              -webkit-print-color-adjust: exact;
              print-color-adjust: exact;
            }
            */
          }
        </style>
      </head>
      <body>
        <!-- 插入克隆的目标DIV内容 -->
        ${clonedElem.outerHTML}
        <!-- 如果你要额外添加图片，就在这里插入（记得转绝对路径） -->
        <img src="${new URL('images/your-extra-img.png', window.location.href).href}" alt="额外添加的图片" style="margin-top: 20px;">
      </body>
    </html>
  `);

  // 关闭文档写入，触发页面加载
  mywindow.document.close();
  mywindow.focus();

  // 等待所有图片加载完成后再打印，避免空白
  const allImages = mywindow.document.querySelectorAll('img');
  let loadedCount = 0;
  const totalImages = allImages.length;

  // 没有图片的情况直接打印
  if (totalImages === 0) {
    mywindow.print();
    mywindow.close();
    return;
  }

  // 监听每个图片的加载状态
  allImages.forEach(img => {
    img.onload = () => {
      loadedCount++;
      if (loadedCount === totalImages) {
        mywindow.print();
        mywindow.close();
      }
    };
    // 处理已经缓存的图片，手动触发加载完成事件
    if (img.complete) {
      img.onload();
    }
  });
}

核心优化点说明 #

• 克隆原元素：直接复制目标DIV的完整结构，比手动拼接HTML更不容易出错，还能保留原有的样式。
• 绝对路径转换：新窗口的默认地址是about:blank，相对路径的图片会找不到，所以把所有图片的src转换成基于当前页面的绝对路径。
• 等待图片加载：如果直接调用print()，可能图片还没渲染完成就打印了，导致空白。这里监听所有图片的加载状态，全部加载完再触发打印。
• 打印样式优化：设置图片的自适应宽度，避免超出打印页面；如果是背景图片，需要添加print-color-adjust属性强制浏览器打印背景。
• 弹出窗口兼容：增加了浏览器阻止弹出的提示，提升用户体验。

使用方法 #

你只需要调用这个函数，传入目标DIV的选择器就行，比如：

// 打印id为"print-div"的元素
PrintElem('#print-div');

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