如何用纯JavaScript在打印指定Div时移除其中的图片与图标？

嘿，我来帮你搞定这个打印函数的问题！你当前的代码只处理了第一张图片，要把目标Div里所有图片和图标都在打印时移除，同时不影响原页面的显示，咱们可以这样优化：

核心问题分析 #

你原来的代码直接修改了原页面的Div元素，而且只隐藏了第一个img标签——这会导致两个问题：

1. 打印结束后原页面的第一张图片会被隐藏；
2. Div内其他图片/图标依然会出现在打印预览里。

优化后的完整代码（安全修改版） #

这个版本会克隆目标Div来修改，完全不影响原页面内容：

function printArticle(divId) {
  // 1. 保存原页面内容（备用）
  const originalHtml = document.body.innerHTML;
  // 2. 获取目标Div并克隆一份，避免修改原页面
  const targetDiv = document.getElementById(divId);
  const printContent = targetDiv.cloneNode(true);

  // 3. 移除克隆内容里的所有图片
  const allImages = printContent.getElementsByTagName('img');
  // 注意：倒序遍历动态集合，防止索引错位
  for (let i = allImages.length - 1; i >= 0; i--) {
    allImages[i].remove();
  }

  // 4. 额外移除图标元素（如果你的图标是.icon类的i/svg，按需调整选择器）
  const allIcons = printContent.querySelectorAll('.icon, svg.icon');
  allIcons.forEach(icon => icon.remove());

  // 5. 替换页面内容为处理后的打印内容
  document.body.innerHTML = printContent.outerHTML;

  // 6. 触发打印对话框
  window.print();

  // 7. 打印完成后恢复原页面内容
  setTimeout(() => {
    document.body.innerHTML = originalHtml;
    // 提示：如果原页面有动态绑定的事件，恢复后需要重新绑定
  }, 100);
}

更稳定的iframe方案（推荐） #

如果原页面有很多动态交互（比如点击事件、表单），上面的方法恢复HTML后会丢失事件绑定，用iframe打印更安全：

function printArticle(divId) {
  const targetDiv = document.getElementById(divId);
  const printContent = targetDiv.cloneNode(true);

  // 移除所有图片和图标
  const allImages = printContent.getElementsByTagName('img');
  for (let i = allImages.length - 1; i >= 0; i--) {
    allImages[i].remove();
  }
  const allIcons = printContent.querySelectorAll('.icon, svg.icon');
  allIcons.forEach(icon => icon.remove());

  // 创建隐藏的iframe容器
  const printIframe = document.createElement('iframe');
  printIframe.style.display = 'none';
  document.body.appendChild(printIframe);

  // 写入打印内容到iframe
  const iframeDoc = printIframe.contentDocument || printIframe.contentWindow.document;
  iframeDoc.write(`
    <html>
      <head>
        <title>打印文章</title>
        <!-- 可以引入原页面的样式，或者添加打印专属样式 -->
        <style>
          @media print {
            body { margin: 0; padding: 2rem; font-size: 14px; }
          }
        </style>
      </head>
      <body>${printContent.outerHTML}</body>
    </html>
  `);
  iframeDoc.close();

  // 等待iframe加载完成后触发打印
  printIframe.onload = function() {
    printIframe.contentWindow.print();
    // 打印结束后移除iframe
    setTimeout(() => {
      document.body.removeChild(printIframe);
    }, 100);
  };
}

关键优化点说明 #

• 克隆Div而非直接修改原DOM：确保原页面的图片和图标不会被意外隐藏；
• 倒序遍历移除元素：因为getElementsByTagName返回的是动态HTML集合，正序移除会导致后面的元素索引错乱；
• iframe隔离打印环境：完全不干扰原页面的DOM和事件绑定，适合复杂页面；
• 按需扩展选择器：如果你的图标是其他标签或类名，修改querySelectorAll的参数即可。

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