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的任何其他部分中的所有现有元素引用。这是一个非常糟糕的选择。

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

Answer 2

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

感谢@CertainPerformance提出解决此问题的想法。

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

2 个答案: