Estoy tratando de usar window.print para imprimir una sola imagen en mi página.
Esa es la imagen que el usuario está interesado en imprimir.
Antes de poner anuncios en mi sitio web, todo funcionaba bien, pero después de iniciar los anuncios de AdSense mientras imprimía la página, la página de vista previa de impresión también muestra los anuncios.
¿Cómo puedo ocultarlos?
antes de ocultar todos los elementos mediante el código css que se ve a continuación, pero ahora no podré saber cómo y dónde se coloca un anuncio, ya que el anuncio es automático.
@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; } }La estructura de la página en su mayoría
<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>¿Cómo imprimir solo la imagen?
Qué tal algo como esto:
@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; } }Oculte todo, luego descubra la imagen y sus ancestros.