Cómo crear una versión para imprimir

Podemos crear una versión para imprimir de una página de una forma sencilla. Tan sólo debemos definir que área de la web queremos que sea visible en la impresión.

Para empezar, en el CSS tenemos que mostrar únicamente el elemento a imprimir y ocultar el resto. Para este ejemplo se ha definido un class llamado “print”. Creamos una hoja de estilos llamada “print.css” con el siguiente contenido:

body {visibility:hidden;}
.print {visibility:visible;}

Incluimos el siguiente código en la cabecera html (head):

<head>
<link rel="stylesheet" href="print.css"
type="text/css" media="print" />
</head>

Lo siguiente es crear un elemento con la clase “print” que incluya todo el contenido que queremos imprimir. Por ejemplo:

<div class="print">
..contenido...
</div>

Ahora ya solo nos queda crear el botón o enlace que ejecute la acción:

<input type="button" value="Imprimir"
onclick="window.print();return false;" />
<a href="#" onclick="window.print();return false;">Imprimir</a>

banner