Ver Mensaje Individual
  #2 (permalink)  
Antiguo 30/07/2007, 12:09
helacer
 
Fecha de Ingreso: mayo-2006
Ubicación: Bogotá
Mensajes: 2.061
Antigüedad: 18 años, 6 meses
Puntos: 50
Re: Como hacer link o boton para hacer PRINT PREVIEW o previsualizacion de impresión?

pues esto sirve para determinar que parte de la pagina desea imprimir y al darle en el link de imprimir muestra la vista preliminar espero le sirva




El problema
Habitualmente las páginas que construimos no sólo contienen la información que deseamos publicar, sino que ésta es acompañada por menús, barras de publicidad, índice de secciones, imágenes...etc. Y además queremos ofrecer a los visitantes la posibilidad de imprimir sólo lo que es contenido. Imagínate una web de cocina en la que quieres ofrecer al visitante la posibilidad de imprimir sólo la receta, sin las barras de navegación, imágenes, etc. El método window.print( ) a secas no nos sirve, porque imprime la página completa si antes no hacemos una selección con el ratón. ¿Podría el Javascript ayudarnos en esta tarea?

La solución
La solución para lograr esto necesita que al diseñar la página preveamos que parte de su contenido vamos a ofrecer a nuestros visitantes para imprimir. Esta parte la colocamos en un elemento de bloque HTML con un atributo id, lo más simple es colocarla dentro de un bloque DIV. De esta forma tenemos localizada la parte de la página que queremos que se imprima. Luego usaremos un botón o un enlace para llamar a una función que abra una ventana nueva. En esta ventana se escribe el contenido del objeto correspondiente al bloque DIV, o sea, lo que deba imprimirse. Una vez hecho esto sólo queda llamar al método print de la nueva ventana.

Un caso práctico
Nada como un ejemplo para aclarar el esquema explicado en el apartado anterior. Primero veamos nuestra página en la que queremos que el visitante pueda imprimir un texto determinado. Usamos un DIV con atributo ID igual a 'seleccion', su contenido es lo que queremos que se imprima (podría ser la receta que indicábamos en el primer apartado).

Código:
<DIV ID="seleccion">Este texto es lo que se imprimirá 
cuando se pulse el enlace.</DIV>
En esa página colocamos un enlace o un botón que llame a la función de imprimir
<a href="javascript:imprSelec('seleccion')" >Imprime 
la ficha</a>
Y por último llega la clave del asunto, la función que ejecuta la impresión parcial, que irá, como es habitual, en la sección head: 
<script language="Javascript">
function 
imprSelec(nombre)
{
  var ficha = document.getElementById(nombre);
  
var ventimp = window.open(' ', 'popimpr');
  ventimp.document.write( 
ficha.innerHTML );
  ventimp.document.close();
  ventimp.print( 
);
  ventimp.close();
} 
</script>
De esta forma podemos ofrecer a los visitantes de nuestras páginas la posibilidad de que impriman una ficha, una imagen, una tabla de valores, de nuestra página sin que tengan que acudir a la siempre incómoda opción de andar seleccionando con el ratón.