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>.

Volver al árbol de categoríasVolver al árbol de categorías

Comentarios

Jaime

03/12/2003
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

LorDuncan

30/9/2004
¿y que tal si continuo con la pregunta?
¿Y si no quiero que salga el boton o link, impreso en la hoja?

Edgar Vega Br.

29/11/2004
... 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

Pablo

18/4/2005
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()">

Miguel Angel Alvarez

18/4/2005
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.

Ricardo Arce

02/6/2005
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".

CPSC

10/8/2005
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?

Sergi

19/9/2005
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>

Rafael

24/9/2005
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...

Freddy Saez

21/3/2006
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!!

Teresa

18/5/2006
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

Manuel Fernandez

29/5/2006
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>

Danilo Ruano

09/8/2006
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

sandra

28/2/2007
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

Claudio

10/7/2007
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.

Rodrigo

13/7/2007
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 */
}

Miguel ^.^

09/1/2008
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

macdanet

29/9/2008
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.

Omar Pérez

16/4/2009
Impresión de una matriz con colores
Hola amigos necesito saber como hago para imprimir una matriz elaborada en java la cual me retorna unos datos y cada interseccion con un determinado color, mi problema es que no puedo imprimir la pagina con los colores que contiene mi matriz...

Pywithfringuesnameisntavaliblenowbecauseiwillyoukillljajajayoufuckingmotherbyebye

18/5/2009
Y esto?
Y si quisiera que le salgan las opciones de borrador y todo todo eso?

Alex

22/5/2009
@:
La verdad estoy iniciando con js y php apoyado 1 poco con css y estoy avanzando rapidamente. Lo k m detiene actualmente es imprimir un formato k esta en una pag html y php, pero unicamente necesito el formato (dimenciones), necesito imprimir por coordenadas??? cual es la opcion??? les agradecere demaciado su ayuda.
GRS.

Sara

28/7/2009
Imprimir fonde de página
Tengo un problema y es que necesito imprimir una página .html que tiene colores de fondo y estos no aparecen al imprimirla

Yerson

09/6/2010
Imprimir sin el boton
Para imprimir la pagina sin que se muestre el boton puedes hacer el siguiente codigo:
<input name="Imprimir" type="submit" value="Imprimir" onclick=" this.style.visibility='hidden'; print(); this.style.visibility=''" />

Eduardo Rojas

12/8/2010
Controlar impresión por seguridad
Estoy trabajando en un sistema, en el cual solo algunas personas con autorización pueden imprimir.

El Crtl+P permitiría a todo usuario, incluso sin el nivel de autorización; imprimir la pagina.

Como hago para impedir que el Crtl+P funcione y solo puedan hacerlo mediante el botón, pues este ultimo lo oculto o muestro según la autorización del usuario.

magister86

23/9/2010
MUY BUENO
muy bueno el de danyruano, me sirivio y es super sencillo, gracias.

monse

26/1/2011
botones
Eh visto comentarios anteriores sobre como programar el codigo en java, mi pregunta es, estoy haciendo al igual que varios d eustedes uan pagina web, mi pregunta es creando el codigo me genera un botton ok, pero como le puedo hacer si quiero ponerle una imagen junto a la palabra imprimir, debo descargar la imagen primero y luego agregarla o puedo inventar una imagen??

salu2

Daniel

29/7/2011
Imprimir Grafico
Hola buen dia alguien que sepa como imprimir solo la grafica utlizando highcharts, es decir tengo una pagina q utliza highcharts pero solo imprima la grafica de la pagina

Fidel

07/9/2011
Ocultar el Botones al usar el metodo print
La opción que mejor funciona para mi, fue la propuesta por claudio, ya que evitamos estar realizando movimientos con funciones javascript y definimos mejor un estilo propio de impresión y alli ocultamos todos los elementos que no querramos que se imprima, en verdad que funciona.

jose gerdel

02/11/2011
Imprimir
Necesito imprimir algunos formatos, lo del boton lo entendi perfecto, pero necesito contador en mysql que cuente el numero de paginas impresas!! como haria?

gaceldiroche

16/11/2011
Como agilizar la impresion desde la Web
Hola a todos, soy nuevo en esto de la programacion Web y me he aventurado a hacer una pagina en la que debo imprimir una pequeña factura, pero el problema es que cuando mando la impresion desde la pagina experimento una lentitud en el proceso de la impresion (spooling o algo asi). Un amigo me comento que podia agilizar la impresion pero no se como. Hay alguna solucion para que sea mas rapida la impresion dedes la Web???

Desde ya Muchas Gracias!!!

nmenendez

25/1/2012
impresion
para que imprimas facturas mejor genera un archivo pdf y luego que manden a imprimir el archivo pdf es mas rapido y seguro que te va a coincidir todas las casillas

Jorge Villasmil

10/5/2013
Botón para imprimir
Puedes hacerlo así:

<a gref="JavaScript:window.print();"><ing src="la imagen del botón que quieras" border="0"></a>

Salu2

Silviano

26/7/2013
Boton
Cuando se manda la Imagen a Imprimir tambien se Imprime el boton como se haria en ese caso. gracias saludos

djflaco16

09/1/2014
Urgente
Muy buen comentario pero cuando lo imrpimo , se borra todo y solo quedan dos imagenes... se puede imprimir toda la pagina asi como esta sin qeu se borre nada de mi formulario..??

milagros

03/4/2014
Necesito ocultar algunos datos al imprimir en php y mysql
Tengo un problema, requiero imprimir un reporte y ya logre hacer la funcion imprimir ocultando el boton imprimir pero ahora me sigue imprimiendo el menu y otras cosas que no quiero que salgan.

Por favor me pueden ayudar. Urgente necesito de su ayuda.......

ivn_daniel_villegas_rojas

22/4/2014
css para imprimir
lo que tenes que hacer es usar los css para imprimir
<link href="impresion.css" type="text/css" media="print" />

y crear dentro de esta hoja de estilo un estilo para ocultar lo que no quieres que salga en tu pagina,

por ejemplo

noImprimir {
display: none;
}

y poner este estilo en los elementos que no quieres que salgan en la impresión.

saludos!!!
FAQ relacionadas

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

Volver al árbol de categoríasVolver al árbol de categorías