Botón Javascript para Imprimir página web

¿Cómo puedo hacer para tener un botón en una página web que, pulsándolo, imprima dicha página web?

La FAQ Botón Javascript para Imprimir página web tiene

Pertenece a la categoría:

Pregunta
¿Cómo puedo hacer para tener un botón en una página web que, pulsándolo, imprima dicha página web?


Respuesta de Miguel Angel Alvarez
Tu respuesta es bastante simple. Debes hacerlo con Javascript, utilizando el método print del objeto window.





window.print()





Si lo deseas vincular a la pulsación de un botón quedería así:





<input type="button" name="imprimir" value="Imprimir" onclick="window.print();">





Recuerda que los botones son elementos de formulario y, por tanto, necesitan escribirse entre las etiquetas <form> y </form>.

Complementar la respuestaComplementar la respuesta
Volver al árbol de categoríasVolver al árbol de categorías

Comentarios
Enviar un comentario a la faq
Fueron enviados 22 comentarios a la faq
4 comentarios no revisados
18 comentarios revisados:
Por: Jaime
03/12/03
En realidad, los botones, pese a ser elementos de formulario, no necesitan ser incluidos dentro de las etiquetas FORM, estas etiquetas pueden ser omitidas lo que produciria que dentro del formulario si es que existe, el boton estaria excluido
Por: LorDuncan
30/9/04
¿y que tal si continuo con la pregunta?
¿Y si no quiero que salga el boton o link, impreso en la hoja?
Por: Edgar Vega Br.
29/11/04
... lo de los forms es cierto, no tenes necesidad de crear objetos de formularios dentro de las etiquetas <form></form>.

Si es obligado cuando vas a enviar variables de un .asp a otro ...

Adios
Por: Pablo
18/4/05
Para imprimir la página sin que salga el botón "imprimir", éste debería abrir una nueva ventana con la misma página pero sin el botón, y el evento window.print() al abrirse la nueva ventana.

El botón "imprimir" sería:

<input type="button" value="IMPRIMIR" onclick="javascript:window.open('paginaImpre.htm', 'noimporta', 'width=300, height=300, scrollbars=NO')">
(los parámetros de la página, ancho y alto no importan si el objetivo es sólo la impresión)

Y paginaImpre.htm sería igual a la primera pero eliminando el botón de impresión y agregando en el body:
<BODY onload="window.print()">
Por: Miguel Angel Alvarez
18/4/05
No es necesario incluir las etiquetas <FORM> y </FORM> en muchos navegadores. Pero existen algunos navegadores donde es necesario incluiirlas, pues si no, los campos del formulario no se verían.

Por ejemplo, necesitamos incluirlas de manera forzosa en versiones antiguas de Netscape. Pero el caso es que, como algunos navegadores las necesitan, lo mejor es incluirlas siempre para que nunca haya lugar a errores.

Por: Ricardo Arce
02/6/05
Para imprimir sin que aparezca el boton imprimir, no hace falta abrir una pagina nueva, sino que se pueden utilizar hojas de estilo .css, y hacer un estilo que sea invisible a la impresora. En el .htm que hace include del nuevo .css se especifica el parámetro media como "print".
Por: CPSC
10/8/05
Tengo una página asp con menus y botones en la barra superior, que recibe y envía parámetros con el FORM y que muestra un listado. Necesito imprimir ese listado, pero que no me aparezcan los botones. Si lo envio a otra página no puedo hacer el 'submit'; si bien puedo ocultar la barra de botones antes del windos.print y luego ponerla visible de nuevo, el método es poco elegante y al usuario no le gusta. ¿Alguna sugerencia?
Por: Sergi
19/9/05
PAra imprimir sin q salgan los botones. lo suyo es utilizar etiquetas div.
<script language="JavaScript">
function doPrint(){
document.all.item("noprint").style.visibility='hidden'
window.print()
document.all.item("noprint").style.visibility='visible'
}
</script>
<form....>
...todo lo de aki se imprimira....
<div id=noprint>
...todo lo de aqui no se imprimira
</div>
</form>
Por: Rafael
24/9/05
También para que no te aparezca el boton, lo que ´puedes hacer es que la parte que quieres que se imprima la pondgas entre <span></span> o <div></div> y el resto en otras <span></span> y al momento de que mandas a imprimir, antes de invocar el print, ocultes los span que no necesitas que se vena involucrados en la impresión...
Por: Freddy Saez
21/3/06
Para imprimir sin INPUT's se debe hacer lo siguiente:

function doPrint(theForm) {
var i;
for(i=0; i<theForm.elements.length ; i++) {
// Agregar en esta lista de condiciones
// todos aquellos tipos de Input que se quieren ocultar
if( (theForm.elements[i].type == "submit") ||
(theForm.elements[i].type == "reset") ||
(theForm.elements[i].type == "button") )
theForm.elements[i].style.visibility = 'hidden';
}
window.print();

for(i=0; i<theForm.elements.length ; i++) {
if( (theForm.elements[i].type == "submit") ||
(theForm.elements[i].type == "reset") ||
(theForm.elements[i].type == "button") )
theForm.elements[i].style.visibility = 'visible';
}
}

Para utilizar esta función se debe definir
la siguiente declaración en la página que incluirá la
función de impresión: ...

<input type="button" value="Imprimir" name="cmdPrint" onclick="doPrint(this.form);"

Espero les sirva!!
Por: Teresa
18/5/06
lo que debes es usar un estilo para imprimir y otro para visualizar por pantalla el estilo imprimir podrias colocarle a el enlace imprimir las siguientes caracteristicas
imprimir.css
.imagen {
height: 0;
width: 0;
position: absolute;
}
normal.css
.imagen {
height: 10;
width: 10;
position: absolute;
}
en tu informe debes llamar a los dos estilos de esta forma
<link href="estilos/estilos.css" rel="stylesheet" type="text/css" media="screen" >
<link rel="stylesheet" type="text/css" href="estilos/impresion.css" media="print" >
y eso se todo
Por: Manuel Fernandez
29/5/06
Para imprimir sin que salgan los botones de imprimir se coloca el sieguiente codigo:

<script>
function window.onbeforeprint(){
noprint.style.visibility = 'hidden';
noprint.style.position = 'absolute';
}
function window.onafterprint(){
noprint.style.visibility = 'visible';
noprint.style.position = 'relative';
}
</script>
<table>
<tr>
<td id="noprint">
<input name="imprimir" type="button" onClick="window.print();" value="Imprimir">
</td>
</tr>
</table>
Por: Danilo Ruano
09/8/06
Para imprimir la pagina sin que aparezca el boton imprimir, no es necesario abrir otra ventana, puede estar el boton en la misma ventana, pero yo hago lo siguiente: mando a llamar una funcion en JavaScript y en esa funcion esta el truco:

<input name="btnImprimir" id="btnImprimir" type="button" class="button" value="Imprimir" onClick="imprime()">

Y el codigo de la funcion imprime() es:

function imprime(){
//desaparece el boton
document.getElementById("btnImprimir").style.display='none'
//se imprime la pagina
window.print()
//reaparece el boton
document.getElementById("btnImprimir").style.display='inline'
}

Cualquier duda que tengas no dudes en escribirme, creo que aqui aparece mi correo, sino, es danyruano@gmail.com
Por: sandra
28/2/07
muchas gracias sergi. tu solución sobre como imprimir una parte de la pagina sin que se imprima lo demás me ha ido muy bien
Por: Claudio
10/7/07
Tengo otra forma de hacer que se imprima la página y a la vez hacer que no aparezca el botón de imprimir:

en el encabezado de la página creas un estilo que oculte el botón o botones que no quieres que aparezcan.

Como ejemplo creen una página tal como ésta:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prueba de impresión</title>
<style media="print" type="text/css">
#imprimir {
visibility:hidden
}
</style>
</head>
<body>
<p>Esto es una prueba de ocultamiento de botones</p>
<form id="form1" name="form1" method="post" action="">
<label>Imprimir
<input type="button" name="imprimir" id="imprimir" value="botón imprimir (no debe salir en la impresión)" onclick="window.print();" />
</label>
<br/>
<br/>
<label>Otro botón
<input type="button" name="otroboton" id="otroboton" value="Este botón si sale en la impresión" />
</label>
</form>
</body>
</html>

Si habrán notado existe un botón con id="imprimir", este botón es el que se ocultará.

En el encabezado debes poner un style, tal como se muestra :

<style media="print" type="text/css">
#imprimir {
visibility:hidden
}
</style>

el cual oculta el botón solo en el contexto de impresión y no cuando lo vez en el navegador.

Como podrás ver, el único javascript que uso es el del evento onclik.

Espero esto te sirva. Suerte y saludos.
Por: Rodrigo
13/7/07
Para que el botón no se muestre al imprimir, lo más fácil es enlazar dos hojas de estilo distintas en tu html, como ya te han dicho:

<!-- lo que aparezca en esta hoja se aplicará tanto para la pantalla como para la impresora -->
<link rel="stylesheet" type="text/css" media="all" href="./estilos.css" />

<!-- lo que aparezca en esta hoja sólo se aplicará para la impresora -->
<link rel="stylesheet" type="text/css" media="print" href="./impresora.css" />

Con lo cual, en pantalla.css tendrías algo como esto:

button#imprimir {
display: none;
/* otros estilos sólo visibles para la impresora */
}
Por: Miguel ^.^
09/1/08
Me parece que las mejores opciones a elegir son las que manejan etiquetas DIV o por manejo de estilos CSS, pero en pariticular me gustó mucho la Respuesta del amigo Fredy, el manejo de la propiedad style = visible/hidden, me sirvió mucho gracias por tu aporte y gracias al resto de los participantes :) xD
Por: macdanet
29/9/08
la opcion de el estilo
<style media="print" type="text/css">
#imprimir{
visibility:hidden
}
El codigo me gusto pero desafortunadamente no funciona en ie6, y este aun tiene gran participacion en internet(a pesar de lo malo que es), es mi mayor dolor de cabeza al programar en la web.
Ver otros 4 comentarios pendientes de revisar
Enviar un comentario a la faq

FAQ relacionadas

Para ver más FAQ relacionadas accede a las categorías:

Volver al árbol de categoríasVolver al árbol de categorías
Alojados en el grupo