Como posso abrir uma caixa de diálogo de impressão usando Javascript?

159

Eu tenho uma página com um link "Imprimir" que leva o usuário a uma página para impressão. O cliente deseja que uma caixa de diálogo de impressão apareça automaticamente quando o usuário chegar à página de impressão fácil. Como posso fazer isso com javascript?

javascript

— MrDatabase
fonte

235

window.print();

a menos que você queira dizer um pop-up com aparência personalizada.

— Marca
fonte

5

Um pouco velho, mas eu gosto de adicionar ... window.print (); setTimeout ("window.close ()", 100); . Isso aguarda tempo suficiente para o restante da página carregar, mas trava até que o botão de impressão na caixa de diálogo seja pressionado ou cancelado e, em seguida, desliga a guia ordenadamente novamente.

— Stephen

37

Você poderia fazer

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

— mmiika
fonte

21

Eu gosto disso, para que você possa adicionar os campos que desejar e imprimi-los dessa maneira.

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
fonte

2

Isso funcionou como um encanto para mim. Necessário para permitir pop-ups no navegador. Não tenho certeza de que o "fechamento" seja executado, pois a guia nunca desaparece.

— Rich

5

Faço isso para garantir que eles lembrem de imprimir paisagem, o que é necessário para muitas páginas em muitas impressoras.

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

ou

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

— Eli
fonte

3

Se você tiver apenas um link sem um manipulador de eventos de clique:

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

— Dan Sinclair
fonte

0

Você pode amarrá-lo ao botão ou ao carregar a página.

window.print();

— a estrela
fonte

0

Eu sei que a resposta já foi fornecida. Mas eu só queria elaborar com relação a fazer isso em um aplicativo Blazor (navalha) ...

Você precisará injetar IJSRuntime, para executar JSInterop (executando funções javascript em C #)

EM SUA PÁGINA RAZOR:

@inject IJSRuntime JSRuntime

Depois de injetar isso, crie um botão com um evento click que chame um método C #:

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

(ou algo mais simples se você não usar o MatBlazor)

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

Para o método C #:

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

AGORA EM SEU index.html:

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

Algo a ser observado, a razão pela qual os eventos onclick são assíncronos é porque o IJSRuntime aguarda chamadas como InvokeVoidAsync

PS: Se você quiser enviar uma caixa de mensagens no asp net core, por exemplo:

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

Para ter uma caixa de mensagem de confirmação:

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 isto ajude :)

— James Heffer
fonte

-6

se problema:

 mywindow.print();

uso alternativo:

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

Cheio:

 $('.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 sem limites
fonte

3

por que você está concatenando isso juntos? '<scr' + 'ipt> print () </ scr' + 'ipt>'

— CRice 2/11/18