¿Cómo crear un cuadro de diálogo emergente para imprimir usando JavaScript?

Dado un documento HTML y la tarea es diseñar un botón que abriría un cuadro de diálogo de impresión. Vamos a usar JavaScript para hacer la tarea asignada:

Enfoque: :

Agregue un botón que se vincule a una función de JavaScript.
Dentro de la función de JavaScript, use la función predeterminada de JavaScript para llamar al cuadro de diálogo de impresión

Sintaxis:

window.print

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>create a pop-up to print 
      dialog box using JavaScript</title>
</head>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <script>
            function printPopUp() {
                alert("Pop-up dialog-box")
                window.print();
            }
        </script>
  
        <button onclick="printPopUp()">Print</button>
    </center>
</body>
  
</html>

Salida:
Antes:

Después:

Enfoque: :

Use DOM onload Event en la etiqueta del cuerpo.
Utilice el método de alerta de ventana para el cuadro de diálogo emergente y window.print para imprimir el documento.

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>create a pop-up to print
      dialog box using JavaScript</title>
</head>
  
<body onload="alert('Pop-up dialog-box');window.print();">
    <center>
        <h1 style="color:green">
          GeeksforGeeks
      </h1> 
      create a pop-up to print dialog box using JavaScript
  </center>
</body>
  
</html>

Producción:

Enfoque: :

Utilice el atributo <a> href para el texto del hipervínculo.
Utilice el método de alerta de ventana para el cuadro de diálogo emergente y window.print para imprimir el documento.

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>create a pop-up to print 
      dialog box using JavaScript</title>
</head>
  
<body>
    <center>
        <h1 style="color:green">
          GeeksforGeeks
      </h1>
        <a href="javascript:alert('Pop-up dialog-box');window.print();">
          Click Me
      </a>
  </center>
</body>
  
</html>

Salida:
Antes:

Después:

Publicación traducida automáticamente

Artículo escrito por XDoodler y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta