¿Cómo puedo abrir un cuadro de diálogo de impresión con Javascript?

159

Tengo una página con un enlace "Imprimir" que lleva al usuario a una página para imprimir. El cliente desea que aparezca un cuadro de diálogo de impresión automáticamente cuando el usuario llegue a la página de impresión. ¿Cómo puedo hacer esto con javascript?

javascript

— MrDatabase
fuente

235

window.print();

a menos que se refiera a una ventana emergente personalizada.

— marca
fuente

55

Un poco viejo, pero me gusta agregar ... window.print (); setTimeout ("window.close ()", 100); . Esto espera el tiempo suficiente para que se cargue el resto de la página, pero luego se cuelga hasta que se presiona o cancela el botón de impresión en el cuadro de diálogo de impresión, y luego cierra cuidadosamente la pestaña nuevamente.

— Stephen

37

Podrías hacerlo

<body onload="window.print()">
...
</body>

— mmiika
fuente

21

Me gusta esto, para que pueda agregar los campos que desee e imprimirlo de esa manera.

function printPage() {
    var w = window.open();

    var headers =  $("#headers").html();
    var field= $("#field1").html();
    var field2= $("#field2").html();

    var html = "<!DOCTYPE HTML>";
    html += '<html lang="en-us">';
    html += '<head><style></style></head>';
    html += "<body>";

    //check to see if they are null so "undefined" doesnt print on the page. <br>s optional, just to give space
    if(headers != null) html += headers + "<br/><br/>";
    if(field != null) html += field + "<br/><br/>";
    if(field2 != null) html += field2 + "<br/><br/>";

    html += "</body>";
    w.document.write(html);
    w.window.print();
    w.document.close();
};

— Daryl H
fuente

2

Esto funcionó como un encanto para mí. Necesario para permitir ventanas emergentes en el navegador. No estoy seguro de que el "cierre" alguna vez se ejecute, ya que la pestaña nunca desaparece.

— rico

5

Hago esto para asegurarme de que recuerden imprimir en horizontal, lo cual es necesario para muchas páginas en muchas impresoras.

<a href="javascript:alert('Please be sure to set your printer to Landscape.');window.print();">Print Me...</a>

o

<body onload="alert('Please be sure to set your printer to Landscape.');window.print();">
etc.
</body>

— Eli
fuente

3

Si solo tiene un enlace sin un controlador de eventos de clic:

<a href="javascript:window.print();">Print Page</a>

— Dan Sinclair
fuente

0

Puede vincularlo al botón o al cargar la página.

window.print();

— la estrella
fuente

0

Sé que la respuesta ya se ha proporcionado. Pero solo quería dar más detalles sobre esto en una aplicación Blazor (navaja) ...

Deberá inyectar IJSRuntime para realizar JSInterop (ejecutar funciones de JavaScript desde C #)

EN TU PÁGINA DE RAZOR:

@inject IJSRuntime JSRuntime

Una vez que haya inyectado eso, cree un botón con un evento de clic que llame a un método C #:

<MatFAB Icon="@MatIconNames.Print" OnClick="@(async () => await print())"></MatFAB>

(o algo más simple si no usa MatBlazor)

<button @onclick="@(async () => await print())">PRINT</button>

Para el método C #:

public async Task print()
{
    await JSRuntime.InvokeVoidAsync("printDocument");
}

AHORA EN TU index.html:

<script>
    function printDocument() {
        window.print();
    }
</script>

Algo a tener en cuenta, la razón por la cual los eventos onclick son asíncronos es porque IJSRuntime espera sus llamadas como InvokeVoidAsync

PD: si desea un cuadro de mensaje en asp net core, por ejemplo:

await JSRuntime.InvokeAsync<string>("alert", "Hello user, this is the message box");

Para tener un cuadro de mensaje de confirmación:

bool question = await JSRuntime.InvokeAsync<bool>("confirm", "Are you sure you want to do this?");
    if(question == true)
    {
        //user clicked yes
    }
    else
    {
        //user clicked no
    }

Espero que esto ayude :)

— James Heffer
fuente

-6

si problema:

 mywindow.print();

Altenativo usando:

'<scr'+'ipt>print()</scr'+'ipt>'

Completo:

 $('.print-ticket').click(function(){

        var body = $('body').html();
        var ticket_area = '<aside class="widget tickets">' + $('.widget.tickets').html() + '</aside>';

        $('body').html(ticket_area);
        var print_html = '<html lang="tr">' + $('html').html() + '<scr'+'ipt>print()</scr'+'ipt>' + '</html>'; 
        $('body').html(body);

        var mywindow = window.open('', 'my div', 'height=600,width=800');
        mywindow.document.write(print_html);
        mywindow.document.close(); // necessary for IE >= 10'</html>'
        mywindow.focus(); // necessary for IE >= 10
        //mywindow.print();
        mywindow.close();

        return true;
    });

— Isa ilimitado
fuente

3

¿por qué estás concatenando esto juntos de todos modos? '<scr' + 'ipt> print () </ scr' + 'ipt>'

— CRice el