> 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
412 16 25 5

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
2320 107 158 7

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