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

Anuncio

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

impresión en medias páginas Ahorre papel formateando e imprimiendo sus archivos con la herramienta de imposición de Govert [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. Deja de tontear... Lee mas y el artículo de Karl sobre PrintWhatYouLike PrintWhatYouLike- Ahorre papel y tinta al imprimir páginas web Lee mas . 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 CSS más personalizable Acercarse.

Integrando la impresión en su sitio web

Cuando mira cualquier página web, es bastante fácil ver por qué desea 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 realmente no le importa si todos los gráficos y las impresiones de formato, entonces todos lo que debe hacer es agregar un botón simple a su página web y usar el método de JavaScript "print ()" 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 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 incrustado para hacer exactamente lo mismo.

Imprime esta página. 

Puedes ver cómo en muchos casos un texto simple se ve mucho más limpio que un botón, pero que usas realmente se reduce a cuál se ve mejor en el área de la página web donde desea proporcionar la impresión característica.

Como puede ver en el ejemplo de impresión 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 del 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 también hacer que los elementos de la página que asigne para imprimir estén visibles.

DIV # encabezado, DIV # newflash, DIV # banner {display: none;} cuerpo {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 la clase "imprimir".

Esta línea será impresa. 

Esta línea no lo hará. 

Ahora puede ver en la copia impresa dónde solo las secciones de la página marcadas con la clase "imprimir" se imprimen 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 de todas las secciones DIV que no desea imprimir. Como puede ver a continuación, no agregué la sección "div" para el anuncio de Google, por lo 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 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 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 visión en la sección de comentarios a continuación.

Credito de imagen: Sundeip Arora