Ocultar elementos al imprimir usando CSS

Publicado por parzibyte en

A veces necesitamos crear facturas, boletas, recibos o cualquier otro documento usando la web. No lo tenemos fácil, ya que hay muchas restricciones debido a la seguridad; por ello tenemos que recurrir a trucos como generar una página, llamar a window.print() y confiar en que el usuario final usa un buen navegador como Chrome.

Pero dejando atrás todo eso, nos encontraremos siempre con que necesitaremos que algunas partes se vean en la impresión, y otras que no. Esto lo podemos hacer usando CSS de la siguiente manera:

Después, podemos usar esta clase para ocultar los elementos que no queremos que salgan en la impresión de la siguiente forma:

 

Los elementos que no tengan esta clase serán siempre visibles. Aquí dejo una demostración en codepen.

See the Pen Ocultar al imprimir by Luis Cabrera Benito (@parzibyte) on CodePen.

Categorías: cssweb

parzibyte

He trabajado por más de 4 años en el desarrollo de software con experiencia en Java, PHP, JavaScript, HTML, Node.JS, Python, Android y Go. También he trabajado con bases de datos SQL como MySQL y SQLite, así como con bases de datos NoSQL usando MongoDB.Soy bueno utilizando algunos frameworks y herramientas como Firebase, jQuery, AngularJS, VueJS, CodeIgniter, Laravel, BulmaCSS, Bootstrap y Electron.Otros términos que conozco son: Arduino, GraphQL, API's, REST, AJAX, PouchDB, CouchDB, Experiencia de usuario, buenas prácticas de programación, Webpack, NPM, Administración de servidores y programación de scriptsLa plataforma en la que tengo más experiencia es la web, pero en mis ratos libres realizo unos pequeños ejercicios en C# y C.Estoy aquí para ayudarte a resolver tus problemas de programación y depuración :-)

1 Comment

Imprimir ticket en impresora térmica usando Javascript - Parzibyte's blog - El blog de Luis Cabrera · mayo 24, 2018 a las 4:29 pm

[…] en el CSS vamos a ocultarlo, para que no salga al imprimir. Ya hice una entrada sobre esto aquí, por lo que no lo […]

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

A %d blogueros les gusta esto: