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

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

En última instancia, diferentes personas quieren la función de impresión en su página web por diferentes razones. Es posible que solo desee agregar comodidad. Cuando el lector puede hacer clic en un botón para obtener una copia impresa, ahorra 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 imprimible y cuidadosamente personalizada del sitio web..

Para cada una de estas situaciones, hay diferentes soluciones. Siempre hemos intentado ofrecer soluciones de impresión innovadoras aquí en MUO, como el artículo de Justin sobre la 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 PDF en media página. 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 ... y el artículo de Karl sobre PrintWhatYouLike PrintWhatYouLike- Ahorre papel y tinta al imprimir páginas web PrintWhatYouLike- Ahorre papel y tinta al imprimir páginas web. En este artículo, voy a proporcionar cuatro formas en que puede integrar un botón de impresión o un enlace en su sitio web: desde el enfoque HTML y Javascript muy simple, hasta el enfoque CSS más personalizable.

Integrando 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 ocupar espacio en la página y consumir desperdicio de papel..

Si tiene un sitio web bastante simple, o si realmente no le importa si todos los gráficos y las impresiones de formato, 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 parece a esto.

Todo lo que el lector tiene que hacer es hacer clic en el botón y la página se enviará directamente a la impresora sin ningún tipo de formato de página. Si la página está más allá del ancho imprimible para la impresora, es posible que termine imprimiendo muchas más páginas de las necesarias..

A algunas personas realmente no les gusta la apariencia de un botón de formulario, por lo 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 lo 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 la impresión de ejemplo anterior, el formato de muchos anuncios y pancartas no coincide perfectamente con la visualización del navegador cuando simplemente utiliza 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 enteras 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 estén visibles.

 DIV # encabezado, DIV # newflash, DIV # banner display: none; body visibilidad: oculto; .print visibilidad: visible; 

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

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

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

Puede tomar algún tiempo crear el archivo CSS y diseñar las clases correctamente. Si realmente no desea molestarse en hacer esto en cada página, puede optar por un último enfoque. Esta es mi técnica favorita para proporcionar versiones imprimibles y perfectamente formateadas de la página web. 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 luego vincular el archivo en el encabezado de la página.

¡Eso es todo lo que tienes que hacer! Puede incrustar el botón de impresión en su sitio al igual que 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 de impresión o un enlace en su página web. Cualquiera de estas opciones funciona bien, pero la elección correcta realmente se reduce a cuán compleja es la página web y qué contenido 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 opinión en la sección de comentarios a continuación.

Haber de imagen: Sundeip Arora