jueves, 27 de febrero de 2014

Imprimir contenido de una página web manteniendo formato CSS usando Javascript

Si bien el 90% del tiempo los desarrolladores web manejan códigos para contenidos en línea algunas veces es necesario que el visitante imprima el contenido de una página web, podría ser el caso de una entrada, un boleto promocional o una planilla de inscripción de declaración de impuestos, son muchas las condiciones en las cuales puede ser necesario crear una salid por impresora de un contenido web.

Como todo en programación hay muchas maneras de lograr que se imprima una parte de la página web, puede ser generando un archivo pdf para luego descargar e imprimir o simplemente imprimiendo la página web completa, en este caso vamos a colocar a disposición de los programadores un código javascript que les permitirá imprimir fácil y rápido cualquier parte de una página web, las ventajas de usar este código son:

- Fácil y rápida instalación
- Compatibilidad con el 90% de los navegadores
- Mantiene cierto formato CSS
- No necesita descargar librerías externas
- Imprime sólo la parte de la página que queremos imprimir (no toda la pantalla)

Antes de instalar el código debemos tener en cuenta que para que este funcione el contenido a imprimir debe estar incluido entre etiquetas <div></div> la cual debe tener un nombre específico y distintivo, por ejemplo <div id="paraimprimir">Aquí va lo que se va a imprimir</div>

Entre las etiquetas <div> podrán colocarse textos, imágenes, tablas, contenidos generados por consulta a bases de datos, formularios o cualquier otro elemento susceptible de recibir formato con hojas de estilo (CSS)

Una vez que tenemos listo nuestro segmento de código con el área a imprimir bien delimitada procedemos a instalar la función javascript que permite imprimir una parte de la página web, lo ideal es instalar la función entre las etiquetas <head></head>:

<script language="Javascript">

  function imprSelec(paraimprimir)
  {
  var ficha = document.getElementById(imp);
  var ventimp = window.open(' ', '_blank');
  ventimp.document.write( ficha.innerHTML );
  ventimp.document.close();
  var css = ventimp.document.createElement("link");
css.setAttribute("href", "tuhojadeeestilos.css");
css.setAttribute("rel", "stylesheet");
css.setAttribute("type", "text/css");
ventimp.document.head.appendChild(css);
  ventimp.print( );
  ventimp.close();
  } 

</script> 

Las secciones de código en amarillo son las que se encargan de preparar la impresión y abrir la comunicación con el dispositivo de salida por su parte las áreas en fondo rojo son las que se encargan de llamar la hoja de estilos de manera que el texto tenga formato (tamaño de fuente, negritas, cursivas), si se omite este segmento de código la impresión será en texto plano, con toda la tipografía igual y sin formato alguno.

Sobre el código en particular hay que tomar dos consideraciones importantes para garantizar que funcione:

function imprSelec(tu div a imprimir) ---> entre paréntesis debe ir el Id del Div donde está el contenido a imprimir

css.setAttribute("href", "tu hoja de estilos"); ---> aquí debe ir el nombre de la hoja CSS que da formato a lo que se desea imprimir; lo ideal es que las hojas de estilo estén en la misma carpeta que el archivo .php donde se instala el javascript para evitar problemas o confusiones de ruta a la hora de implementar el código.

Una vez que se ha completado la instalación sólo basta crear el botón o enlace de texto que llame a la función para imprimir, es importante que el botón esté fuera de las etiquetas <div> donde está el contenido a imprimir para que no salga en la impresión.

Una forma fácil de hacer la llamada a impresión es con un enlace de texto: 
<a href="javascript:imprSelec('muestra')">Imprimir</a>

Con este código se obtendrán impresiones de calidad bastante aceptable con una instalación mínima de código en la página web, incluso si se tienen varias secciones para imprimir se pueden crear <div> independientes, cada uno con su propio botón para sacar por la impresora esa parte de la página web.

La instalación es tan flexible que permite crear áreas imprimibles en páginas web ya existentes sin casi modificar el código original.

Las opciones son ilimitadas, sólo resta probarlas y dejar fluir la creatividad.