Bagaimana saya bisa memunculkan kotak dialog cetak menggunakan Javascript?

159

Saya memiliki halaman dengan tautan "Cetak" yang membawa pengguna ke halaman ramah-printer. Klien ingin kotak dialog cetak muncul secara otomatis ketika pengguna tiba di halaman ramah-cetak. Bagaimana saya bisa melakukan ini dengan javascript?

javascript

— MrDatabase
sumber

235

window.print();

kecuali yang Anda maksud adalah popup yang tampak kustom.

— Menandai
sumber

5

Agak lama, tapi saya suka menambahkan ... window.print (); setTimeout ("window.close ()", 100); . Ini menunggu cukup banyak waktu untuk memuat halaman lainnya, tetapi kemudian hang sampai tombol cetak pada dialog cetak ditekan, atau dibatalkan, dan kemudian menutup kembali tab dengan rapi.

— Stephen

37

Anda bisa melakukannya

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

— mmiika
sumber

21

Saya suka ini, sehingga Anda dapat menambahkan bidang apa pun yang Anda inginkan dan mencetaknya seperti itu.

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
sumber

2

Ini bekerja seperti pesona bagi saya. Diperlukan untuk mengizinkan munculan di peramban. Saya tidak yakin "tutup" pernah dieksekusi, karena tab tidak pernah hilang.

— kaya

5

Saya melakukan ini untuk memastikan mereka ingat untuk mencetak lansekap, yang diperlukan untuk banyak halaman di banyak printer.

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

atau

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

— Eli
sumber

3

Jika Anda hanya memiliki tautan tanpa pengendali acara klik:

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

— Dan Sinclair
sumber

0

Anda dapat mengikatnya ke tombol atau memuat halaman.

window.print();

— bintang
sumber

0

Saya tahu jawabannya sudah diberikan. Tapi saya hanya ingin menjelaskan tentang melakukan ini di aplikasi Blazor (pisau cukur) ...

Anda harus menyuntikkan IJSRuntime, untuk melakukan JSInterop (menjalankan fungsi javascript dari C #)

DI HALAMAN RAZOR ANDA:

@inject IJSRuntime JSRuntime

Setelah Anda menyuntikkannya, buat tombol dengan acara klik yang memanggil metode C #:

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

(atau sesuatu yang lebih sederhana jika Anda tidak menggunakan MatBlazor)

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

Untuk metode C #:

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

SEKARANG DI index.html ANDA:

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

Sesuatu yang perlu diperhatikan, alasan acara onclick asinkron adalah karena IJSRuntime menunggu panggilannya seperti InvokeVoidAsync

PS: Jika Anda ingin kotak pesan di asp net core misalnya:

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

Untuk memiliki kotak pesan konfirmasi:

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
    }

Semoga ini membantu :)

— James Heffer
sumber

-6

jika masalah:

 mywindow.print();

altenative menggunakan:

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

Penuh:

 $('.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 tanpa batas
sumber

3

kenapa kau menggabungkan ini bersama? '<scr' + 'ipt> print () </ scr' + 'ipt>'

— CRice