> Faqs > Botón Javascript para Imprimir página web

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?

Respuestas

Con un código más moderno, quedaría así.

El botón HTML:

<input type="button" value="Imprimir" class="printbutton">

El Javascript:

El script Javascript para definir el evento click sobre el botón, donde usaremos la clase "printbutton" para darle el comportamiento a todos los botones de la página que tengan esa clase.

document.querySelectorAll('.printbutton').forEach(function(element) {
    element.addEventListener('click', function() {
        print();
    });
});

Ventajas de esta solución de botón imprimir

Esta solución permite algunas mejoras:

  • Separamos el Javascript del HTML, por tanto, este script se adaptaría a cualquier documento HTML
  • Podemos tener varios botones de imprimir página web, tantos como elementos con la clase css "printbutton" pongamos.
  • Podemos tener varios tipos de botones y no necesariamente botones, podrían ser también imágenes, por ejemplo:
<img src="https://via.placeholder.com/36" alt="imprimir" class="printbutton">

En este caso y como extra, convendría ponerle un estilo CSS a la imagen para que se vea que se puede pulsar.

<style>
    .printbutton {
        cursor: pointer;
    }
</style>

Ejemplo completo de página con botones para impresión

La página donde he puesto este ejemplo en funcionamiento se puede ver aquí:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .printbutton {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Imprimir...</h1>
    
    <input type="button" value="Imprimir" class="printbutton">

    <p>Lorem ipsum.......</p>
    
    <p>
        <img src="https://via.placeholder.com/36" alt="imprimir" class="printbutton">
    </p>

    <script>
        document.querySelectorAll('.printbutton').forEach(function(element) {
            element.addEventListener('click', function() {
                print();
            });
        });
    </script>
</body>
</html>
Camila
580 23 38 6

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

Miguel Angel
3078 138 205 16

¿En caso de tener un checkbox y querer imprimir tambien ese dato como se deberia manejar??

Tomas
0
Entiendo que quieres imprimir el estado del checkbox. Eso lo podrías hacer introduciendo algún contenido en el body en función del estado. Es complicado responder en un comentario, puedes crear una faq explicando qué es lo que quieres hacer y el código de ejemplo (simplificando para colocar solamente las partes que interesen) que estás intentando.

Y ¿Qué pasa si no quiero imprimir toda la página?, en lugar de ello imprimir solo el contenido, por ejemplo, sin el header y el footer, solo el cuerpo. ¿Cómo se configuraría el botón o qué se tiene que hacer?

MaryLiz
0
En este caso lo que harías sería poner ciertas partes con display: none en el caso que sea el medio de impresión (@media print). Puedes ver un ejemplo en desarrolloweb.com/articulos/saltos-pagina-imprimir-css.html