Javascript kullanarak bir yazdırma iletişim kutusunu nasıl açabilirim?

159

Kullanıcıyı yazıcı dostu bir sayfaya götüren "Yazdır" bağlantısına sahip bir sayfam var. Kullanıcı, yazdırma dostu sayfaya geldiğinde istemci otomatik olarak bir yazdırma iletişim kutusu görüntülenmesini istiyor. Javascript ile bunu nasıl yapabilirim?

javascript

— MrDatabase
kaynak

235

window.print();

özel görünen bir açılır pencere anlamına gelmedikçe.

— işaret
kaynak

5

Biraz eski, ama eklemek istiyorum ... window.print (); setTimeout ("window.close ()", 100); . Bu, sayfanın geri kalanının yüklenmesi için yeterli süre bekler, ancak daha sonra yazdırma iletişim kutusundaki yazdırma düğmesine basılana veya iptal edilene kadar askıda kalır ve ardından sekmeyi tekrar kapatır.

— Stephen

37

Yapabilirsin

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

— mmiika
kaynak

21

Bunu beğendim, böylece istediğiniz alanları ekleyebilir ve bu şekilde yazdırabilirsiniz.

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
kaynak

2

Bu benim için bir cazibe gibi çalıştı. Tarayıcıda pop-up'lara izin vermek için gerekir. Sekme asla kaybolmadığından "kapat" ın yürütüldüğünden emin değilim.

— zengin

5

Bunu, birçok yazıcıda birçok sayfa için gerekli olan manzara yazdırmayı hatırladıklarından emin olmak için yapıyorum.

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

veya

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

— Eli
kaynak

3

Tıklama etkinliği işleyicisi olmayan bir bağlantınız varsa:

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

— Dan Sinclair
kaynak

0

Düğmeye veya sayfanın yüklenmesine bağlayabilirsiniz.

window.print();

— Yıldız
kaynak

0

Cevabın verilmiş olduğunu biliyorum. Ama bunu bir Blazor uygulamasında (jilet) yapmakla ilgili ayrıntılı bir açıklama yapmak istedim ...

JSInterop (C # 'dan javascript işlevlerini çalıştırmak) için IJSRuntime enjekte etmeniz gerekecektir.

RAZOR SAYFANIZDA:

@inject IJSRuntime JSRuntime

Bunu enjekte ettikten sonra, bir C # yöntemini çağıran bir tıklama etkinliğine sahip bir düğme oluşturun:

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

(veya MatBlazor kullanmıyorsanız daha basit bir şey)

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

C # yöntemi için:

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

ŞİMDİ index.html:

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

Dikkat edilmesi gereken bir şey, onclick olaylarının eşzamansız olmasının nedeni, IJSRuntime'ın InvokeVoidAsync gibi çağrılarını beklemesidir.

Not: Örneğin asp net core'da mesaj kutusu göndermek istiyorsanız:

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

Onay mesaj kutusuna sahip olmak için:

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
    }

Bu yardımcı olur umarım :)

— James Heffer
kaynak

-6

sorun varsa:

 mywindow.print();

altenative kullanarak:

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

Tam:

 $('.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;
    });

— Sınırsız isa
kaynak

3

neden yine de bunu bir araya getiriyorsun? '<scr' + 'ipt> print () </ scr' + 'ipt>'

— CRice