Cómo agregar un botón de impresión a su página web

Ya sabes, algo así como agregar un botón de impresión a una página web suena bastante simple, ¿verdad? De hecho, ¿por qué incluso tenemos que agregar un botón de impresión o un enlace a la página, cuando todo lo que el lector tiene que hacer es hacer clic en “Expediente” y “Impresión… ” en el menu del navegador?

En última instancia, diferentes personas quieren la función de impresión en su página web por diferentes motivos. Es posible que desee agregar conveniencia. Cuando el lector puede simplemente hacer clic en un botón para obtener una impresión, guarda unos pocos clics y cada clic cuenta. Otras personas desean personalizar el texto impreso; en otras palabras, ocultar ciertos elementos de la página de la impresión. En otras situaciones, las personas prefieren crear una versión del sitio web cuidadosamente impresa e imprimible..

Para cada una de estas situaciones, existen diferentes soluciones. Siempre hemos intentado ofrecer soluciones de impresión innovadoras aquí en MUO, como el artículo de Justin sobre impresión en medias páginas Ahorre papel formateando e imprimiendo sus archivos con la herramienta de imposición de Govert [Windows] Ahorre papel formateando e imprimiendo sus archivos con la imposición de Govert Herramienta [Windows] El papel cuesta dinero. Guarde ambos imprimiendo sus archivos PDF en medias páginas. Ya sea que desee un folleto o copias en paralelo, una herramienta gratuita para Windows no solo lo hace posible sino también simple. Deje de perder el tiempo ... Lea más y el artículo de Karl en PrintWhatYouLike PrintWhatYike Like - Ahorre papel y tinta al imprimir páginas web PrintWhatYouike - Ahorre papel y tinta al imprimir páginas web Lea más. En este artículo, voy a proporcionar cuatro formas en las que puede integrar un botón de impresión o un enlace a su sitio web: desde el sencillo enfoque de HTML y Javascript hasta el enfoque de CSS más personalizable..

Integración de la impresión en su sitio web

Cuando miras cualquier página web, es bastante fácil ver por qué quieres personalizar la impresión. Una página web típica tiene anuncios, pancartas, enlaces de anuncios, barras laterales y secciones de pie de página que no hacen más que comerse el espacio de la página y consumir papel de forma inútil..

Si tiene un sitio web bastante simple, o si realmente no le importa si todos los gráficos y el formato se imprimen, entonces todo lo que tiene que hacer es agregar un botón simple a su página web y usar el “impresión()” Método javascript para enviar la página web a la impresora..

Colocar este código en su sitio en una ubicación que sea rápida y fácil de usar para sus lectores se ve así..

Todo lo que el lector debe hacer es hacer clic en el botón y la página se enviará directamente a la impresora sin ningún formato de página. Si la página supera el ancho imprimible de la impresora, es posible que termine imprimiendo muchas más páginas de las que realmente necesita..

A algunas personas realmente no les gusta la apariencia de un botón de formulario, así que como alternativa, simplemente puede usar un enlace con el javascript incorporado para hacer exactamente lo mismo..

 Imprime esta página 

Puede ver cómo, en muchos casos, un texto simple se ve mucho más limpio que un botón, pero el que usa realmente se reduce a lo que se ve mejor en el área de la página web donde desea proporcionar la función de impresión..

Como puede ver en el ejemplo de impresión anterior, el formato de muchos anuncios y pancartas no coincide perfectamente con la pantalla del navegador cuando simplemente usa el comando de impresión. Esto se vuelve mucho más evidente para los sitios web más complejos. Otro enfoque que utilizan las personas es bloquear secciones completas del sitio web mediante CSS y asignar secciones específicas de la página para imprimir. Para ello, primero vincula el archivo CSS en la sección de encabezado.

A continuación, deberá crear el archivo CSS real y guardarlo en el mismo directorio que su página web. El archivo CSS debe asignar todas las secciones de la página que no deben imprimirse, y luego hacer que los elementos de la página que asigne para imprimir sean visibles..

 DIV # encabezado, DIV # newflash, DIV # banner pantalla: ninguna; cuerpo visibilidad: oculta; .print visibilidad: visible; 

Ahora que su archivo CSS está configurado, todo lo que tiene que hacer es ir a través de su página y etiquetar cada sección con el “impresión” clase.

  Esta línea será impresa. Esta linea no.  

Ahora puede ver en la impresión donde solo las secciones de la página marcadas con el “impresión” la clase se imprime en la página, y todas las demás secciones no lo hacen. La única dificultad con este enfoque es que debe asegurarse de apagar la pantalla para todas las secciones DIV que no desea imprimir. Como se puede ver a continuación, no agregué la “div” sección para el anuncio de Google, por lo que todavía impreso.

Puede llevar algún tiempo construir el archivo CSS y diseñar las clases correctamente. Si realmente no quiere molestarse en hacer esto en cada página, entonces puede optar por un último enfoque. Esta es mi técnica favorita para proporcionar versiones imprimibles de la página web perfectamente formateadas. Todo lo que tiene que hacer es crear una versión en formato PDF del contenido de la página web, guardarla en su servidor web y vincular el archivo en el encabezado de la página..

¡Eso es todo lo que tienes que hacer! Puede insertar el botón de impresión en su sitio como en los ejemplos anteriores, pero en lugar del archivo CSS cargado para el método de impresión, el PDF, DOC u otro archivo se envía a la impresora. Como puede ver a continuación, esto genera la versión imprimible más limpia de su página, y puede personalizarla para que se vea exactamente como lo desea..

Como puede ver, hay muchas opciones para elegir cuando desea colocar un botón o enlace de impresión en su página web. Cualquiera de estas opciones funciona bien, pero la opción correcta realmente se reduce a lo compleja que es la página web y al contenido que desea ofrecer a sus lectores cuando eligen imprimir su página web..

¿Has probado alguna de estas técnicas para agregar un botón de impresión a una página web? ¿Qué técnica te gusta más? ¿Tienes alguna otra solución? Comparta su conocimiento en la sección de comentarios a continuación.

Crédito de la imagen: Sundeip Arora

Explorar más sobre: ​​Impresión, Desarrollo web, Herramientas para webmasters.