打印页面时隐藏 Google 个广告

Question

我正在尝试使用 window.print 在我的页面上打印单个图像。

这是用户有兴趣打印的图像。

在我的网站上投放广告之前一切正常，但在打印页面时启动 adsense 广告后，打印预览页面也会显示广告。

如何隐藏它们？

之前我通过 css 代码隐藏所有元素，如下所示，但现在我无法知道广告的放置方式和位置，因为广告是自动的。

@media print {
    @page {
        margin: 0;
        margin-top: 10px;
    }
    nav, header, .cardButtonRow, #about, .toastContainer, footer, .adsbygoogle, .google-auto-placed {
        display: none;
    }
    .cardImage img {
        width: 82%;
        box-shadow: none;
    }
}

主要是页面结构

<body>
<nav>....</nav>
<article class="container cardContainer">


        <header>
            <h1>Your eCard is Ready to Print</h1>
            <p>Save it or Print it !</p>
        </header>

        <div class="cardImage">
            <img alt="">
        </div>

        <div class="cardButtonRow">
            <a class="button" onclick="printClick();">Print Card</a>
            <a class="button">Download</a>
        </div>

...
<footer>...</footer>
</body>

如何只打印图片？

Answer 1

这样的事情怎么样：

@media print {
    @page {
        margin: 0;
        margin-top: 10px;
    }
    * {
        display: none !important;
    }
    html, body, article, .cardImage, .cardImage img {
        display: block !important;
    }
    .cardImage img {
        width: 82%;
        box-shadow: none;
    }
}

隐藏所有内容，然后取消隐藏图像及其祖先。

打印页面时隐藏 Google 个广告

Hide Google Ads while printing the page

html

javascript

css

ads

adsense