Estoy tratando de encontrar una manera de imprimir solo un div de un dominio web con dimensiones específicas (3 "x5"). Configuré el botón de imprimir pero hasta ahora cada vez que imprimo sale la página entera.
¿Hay alguna forma de ocultar todo el contenido que no es div en la vista previa de impresión?
CSS
.wholebody { height: 289px; width: 489px; border: 2px solid #00001a; } </style>HTML
<body> <button onclick="window.print()">Print Page</button> <div class="wholebody"> </div>Avíseme si debería (y qué tipo de) funciones JS me permitirían ocultar el contenido que no es div. Gracias.
Puedes escribir los estilos que quieras que aparezcan cuando se abra la página web en el bloque @media screen{} . Cuando se ejecuta el método window.print() , se aplican los estilos dentro del bloque @media print{} . En este ejemplo, al hacer clic en el elemento <button> se transferirá el elemento creado a la página de creación.
var button = document.getElementById('printButton'); printButton.addEventListener('click', function(){ var div = `<div style="width:30px;height:50px;border:2px solid black; margin: 20px; display: block;"></div>`; $('.wholebody').append(div); window.print(); }); @media screen{ .wholebody { height: 289px; width: 100%; border: 2px solid #00001a; } #printButton{ margin-bottom: 5px; } } @media print{ #printButton{ display: none; } } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <button id="printButton">Print Page</button> <div class="wholebody"> </div> </body>Puede usar el tipo de print css @media para seleccionar el contenido que desea imprimir.
imprimir Destinado a material paginado y documentos vistos en una pantalla en modo de vista previa de impresión. (Consulte los medios paginados para obtener información sobre problemas de formato que son específicos de estos formatos).
.wholebody { height: 289px; width: 489px; border: 2px solid #00001a; } @media print{ body{ visibility: hidden; } div{ visibility: visible; } } <button onclick="window.print()">Print Page</button> <p>Not printing this</p> <div class="wholebody">Print this</div>