我在 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。
最佳答案
如果您绝对必须走 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>
关于javascript - 取一个 div,使用纯 javascript 从打印中删除一些元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49868202/