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>.
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ías |
Comentarios
Enviar un comentario a la faq
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?
¿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
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()">
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>
<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!!
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
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>
<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
<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.
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 */
}
<!-- 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.
<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.
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=''" />
<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.
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
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!!!
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
<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.......
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!!!
<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!!!
axcer_escobar
15/8/2015
me sirvió la idea de claudio
de todas las ideas que leí aqui la mejor fue la de CLAUDIO, super sencilla sin usar javascript q es un poco mas engorrosa.
Fernando
12/11/2015
Impresion seleccionada
que tal, tengo un problema, quiero imprimir una forma en SharePoint, tengo la opción de insertar el código, no tengo ningún problema con eso, imprime muy bien y no aparece el botón de impresión en la hoja, les dejo el dato:
<style type="text/css" media="print">
#imprimir {
visibility:hidden
}
</style>
<br/>
<input name="imprimir" id="imprimir" onclick="window.print();" type="button" value="Imprimir"/><br/>
mi problema es que la impresión sale muy chica, necesito saber como hacer que la impresión salga en la hoja completa que es tamaño carta, y mi otro problema es que no deceo que salga toda la información, puedo manipular las columnas que yo cree, pero al final de la forma sale "creado por" y "ultima modificacion" , esto sale por default en la forma, quiero imprimir todo menos esa parte que se encuentra al final de la forma, gracias y saludos!!!
<style type="text/css" media="print">
#imprimir {
visibility:hidden
}
</style>
<br/>
<input name="imprimir" id="imprimir" onclick="window.print();" type="button" value="Imprimir"/><br/>
mi problema es que la impresión sale muy chica, necesito saber como hacer que la impresión salga en la hoja completa que es tamaño carta, y mi otro problema es que no deceo que salga toda la información, puedo manipular las columnas que yo cree, pero al final de la forma sale "creado por" y "ultima modificacion" , esto sale por default en la forma, quiero imprimir todo menos esa parte que se encuentra al final de la forma, gracias y saludos!!!
Florelba
Dani
01/3/2016
Imprimir
Disculpen tengo una duda estoy tratando de imprimi un ticket pero no puedo ajustarlo al tamaño de contenido del ticket, si el ticket contiene mucho detalle se sobre pasa de la hoja de impresion y no me imprime eso y cuando el detalle es muy pequeño ya tambien me sobra espacio e imprime casi mitad de la hoja en blanco alguien me puede echar una mano de antemano gracias. .!!
Edward
26/5/2016
Amigos una consulta
Me funciona normal la impresión solo imprimo cierta área del html y también oculto el botón para que no salga el problema es que al seleccionar solo una área de impresión para imprimir también sale la hoja en blanco que oculto para que solo salga cierto contenido. agradecería algún aporte :D
Gracias.
Slds,
Gracias.
Slds,
Amanda
16/6/2016
Imprimir en PDF
¿Y si lo que quiero es que me imprima directamente en el formato PDF sin tener que preguntar?
FAQ relacionadas
- Pasar variables de ASP o PHP hacia Javascript o viceversa
- Enviar un mismo formulario a tres frames distintos
- Retardo en Javascript
- Enlace múltiple
- Redimensionar en Netscape el tamaño de la ventana
- ¿Cuál es la diferencia entre Java y Javascript?
- Abrir ventanas secundarias en Javascript
- Cómo tener dos scripts en la misma página para dos navegadores
- Enviar al navegador a otra página si no tiene habilitado Javascript
- Abrir una ventana pequeña que quede detrás de la principal.
- ...
Para ver más FAQ relacionadas accede a las categorías:
| Volver al árbol de categorías |