Como hacer link o boton para hacer PRINT PREVIEW o previsualizacion de impresión?

[SI TAN SOLO TUVIERA]

Hola.

Alguien sabe como se hace un link o boton para hacer el PRINT PREVIEW o previsualizacion de impresión que trabaje en firefox y explorer?


GRACIAS!!!

[helacer]

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.

[SI TAN SOLO TUVIERA]

Esta buenisimo eso de con div's seleccionar unicamente ciertas partes!! te pregunto elhacer, ese ID="seleccion" funciona tambien en tablas, o celdas?? o solo y unicamente con DIVs??


Gracias por la ayuda!

[helacer]

mmm pues solo funciona con divs pero igual puede hacer lo que me pregunta por lo unico que tendria que hacer es colocar la tabla dentro de un div y listo

<div ID="seleccion">
<table>
<tr>
<td>loquesea</td>
</tr>
</table>
</div>

suerte

[SI TAN SOLO TUVIERA]

Gracias helacer por el dato!! muy amable!

voy a probarlo!

... 5 mins... jejej!!! funciona de maravilla!!! GRACIAS!

[SI TAN SOLO TUVIERA]

Lo unico raro que veo, es que, automaticamente se abre la ventana de impresion lo cual no deja hacer scroll down, como para comprobar todo lo que se va imprimir, sabes como se puede arreglar esto?

[Victor M. B.]

Les cuento, probe el codigo y funciona de maravilla, el unico problema que al abrir la nueva ventana para la impresion no aparce con el mismo formato que tenia para visualizar.

Saben como solucionar esto.

[SI TAN SOLO TUVIERA]

Quede igual!