javascript - 取一个 div，使用纯 javascript 从打印中删除一些元素

Question

我在 javascript 中有一个打印函数，它提取一个选定的 div 元素，替换 html 内容并打开打印对话框，因此只打印特定的 div。

但是在该 div 中有一些图像和图标我还需要从打印对话框中删除。

function printArticle(divId) {
        var originalHtml = document.body.innerHTML;
        var printContent = document.getElementById(divId).innerHTML;
        var imgs = document.getElementById(divId).getElementsByTagName('img');
        imgs[0].style.display = 'none';
        document.body.innerHTML = printContent;
        window.print();
        document.body.innerHTML = originalHtml;
    }

显然上面的代码对用于可打印版本的 printContent 没有影响，因为它是一个字符串，所以我不确定如何修复这里的逻辑。

我试过正则表达式，但它需要非常特定于 img 标签，并且在图像发生变化或其他情况时并不理想。

我希望上述解决方案可用于任何元素，因为我还想删除另一个 div。

Answer 1

如果您绝对必须走 Javascript 路线而不是 CSS 路线，您可以执行以下操作:

function printArticle(divId) {
  const originalHTML = document.body.innerHTML;
  document.body.innerHTML = document.getElementById(divId).innerHTML;
  document.querySelectorAll('img')
    .forEach(img => img.remove())
  window.print();
  document.body.innerHTML = originalHtml;
}

但请注意，分配给 innerHTML 将破坏 Javascript 任何其他部分中的所有现有元素引用。这是一个非常糟糕的选择。

另一种可能性是打开一个新窗口并删除相应的图像，然后打印并关闭新窗口，而不更改原始窗口中的任何内容。 p>