Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

Como puedo hacer un boton de imprimir pagina web

hola amigos de datoweb me gustaria saber como puedo poner un boton en mi web que al hacer clic se pueda imprimir la pagina que esta viendo el usuario en ese momento

estoy haciendo un sistema de compra ventas y necesito que los visitantes puedan imprimir la ficha de los productos que se listan en las diferentes categorías

gracias de antemano
0
Puntos
617
Visitas
3
Resp
Por zero93 hace 16 meses
Principiante
Respuesta #1
hola puedes hacerlo con window.print() de javascript, te pongo un ejemplo:
<div id="capa1" style="background-color: #63fb45; margin: 20px; padding: 20px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, voluptate officia tempore minima architecto voluptates accusamus? Ex quaerat eius, quibusdam a quidem molestias totam, pariatur dolor fuga, vitae amet laborum!
</div>

<div id="capa2" style="background-color: #ffdd00; margin: 20px; padding: 20px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, voluptate officia tempore minima architecto voluptates accusamus? Ex quaerat eius, quibusdam a quidem molestias totam, pariatur dolor fuga, vitae amet laborum!
</div>

<a href="javascript: window.print();">Imprimir pagina</a>
también puedes hacer que algunos elementos no sean visibles en la impresión utilizando un poco de css:
<style>
  
@media print {
a {
    display:none;
}

}
</style>

<div id="capa1" style="background-color: #63fb45; margin: 20px; padding: 20px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, voluptate officia tempore minima architecto voluptates accusamus? Ex quaerat eius, quibusdam a quidem molestias totam, pariatur dolor fuga, vitae amet laborum!
</div>

<div id="capa2" style="background-color: #ffdd00; margin: 20px; padding: 20px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, voluptate officia tempore minima architecto voluptates accusamus? Ex quaerat eius, quibusdam a quidem molestias totam, pariatur dolor fuga, vitae amet laborum!
</div>

<a href="javascript: window.print();">Imprimir pagina</a>
de esta manera el boton imprimir pagina no apareceria en la impresión, si quieres agregar mas elemetos que no sean visibles solo tienes que agregarlos al media print del css:
<style>
  
@media print {
a,
#capa1 {
    display:none;
}

}
</style>
;)
2
Puntos
Por alber hace 16 meses
Administrador
Respuesta #2
te dejo una pequeña demo https://jsfiddle.net/datoweb/4j2mLt0o/
2
Puntos
Por alber hace 16 meses
Administrador
Respuesta #3
gracias por tu ayuda como siempreee
0
Puntos
Por zero93 hace 16 meses
Principiante
Compartir en facebook
Compartir en twitter
Compartir
Para comentar Inicia sesión o Registrate