打印网页时如何隐藏谷歌广告并仅打印目标图片

方案1：纯CSS白名单控制打印内容 #

不用逐个排查要隐藏的广告元素，直接把所有非目标打印内容默认隐藏，仅保留需要打印的图片即可，适配自动插入的任意广告：

@media print {
    @page {
        margin: 0;
        margin-top: 10px;
    }
    /* 先隐藏body下所有直接子元素 */
    body > * {
        display: none !important;
    }
    /* 仅保留目标图片容器显示，重置必要样式 */
    body > .cardContainer,
    body > .cardContainer .cardImage,
    body > .cardContainer .cardImage img {
        display: block !important;
        width: 82% !important;
        margin: 0 auto !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    /* 隐藏卡片容器里其他不需要的子元素 */
    body > .cardContainer > *:not(.cardImage) {
        display: none !important;
    }
}

该方案无需修改现有JS逻辑，适配绝大多数自动投放广告的场景。

方案2：JS临时构造打印内容（最稳妥） #

如果CSS方案还是被动态插入的广告干扰，可以直接修改printClick函数，临时提取目标图片单独触发打印，完全不受页面其他元素影响：

function printClick() {
    // 保存原始页面内容
    const originalContent = document.body.innerHTML;
    // 提取目标图片
    const targetImg = document.querySelector('.cardImage img').cloneNode(true);
    // 临时替换body内容为仅目标图片
    document.body.innerHTML = '';
    document.body.appendChild(targetImg);
    // 给临时图片加打印适配样式
    targetImg.style.width = '82%';
    targetImg.style.margin = '10px auto 0';
    targetImg.style.display = 'block';
    // 触发打印
    window.print();
    // 打印完成/取消后恢复原始页面
    document.body.innerHTML = originalContent;
    // 如果页面有自定义事件绑定，可在此处重新执行绑定逻辑
}

如果是Vue、React等框架开发的页面，直接修改innerHTML会导致框架绑定的事件失效，可以改用创建隐藏iframe的方式实现，把目标图片写入iframe后触发iframe的print方法即可。

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