Как я могу открыть диалоговое окно печати, используя Javascript?

159

У меня есть страница со ссылкой «Печать», которая переводит пользователя на страницу для печати. Клиент хочет, чтобы диалоговое окно печати отображалось автоматически, когда пользователь попадает на страницу для печати. Как я могу сделать это с помощью JavaScript?

MrDatabase
источник

Ответы:

235
window.print();  

если вы не имеете в виду нестандартный вид всплывающего окна.

отметка
источник
5
Немного стар, но мне нравится добавлять ... window.print (); setTimeout ("window.close ()", 100); , Это ожидает достаточно времени для загрузки остальной части страницы, но затем зависает, пока кнопка печати в диалоговом окне печати не будет нажата или отменена, а затем аккуратно снова закроет вкладку.
Стивен
37

Вы могли бы сделать

<body onload="window.print()">
...
</body>
mmiika
источник
21

Мне это нравится, так что вы можете добавлять любые поля и печатать их таким образом.

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();
};
Дэрил Х
источник
2
Это сработало как обаяние для меня. Необходимо разрешить всплывающие окна в браузере. Я не уверен, что «закрыть» когда-либо выполняется, так как вкладка никогда не исчезает.
богатый
5

Я делаю это, чтобы удостовериться, что они не забывают напечатать пейзаж, что необходимо для большого количества страниц на многих принтерах.

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

или

<body onload="alert('Please be sure to set your printer to Landscape.');window.print();">
etc.
</body>
Eli
источник
3

Если у вас есть ссылка без обработчика события click:

<a href="javascript:window.print();">Print Page</a>
Дэн Синклер
источник
0

Вы можете привязать его к кнопке или при загрузке страницы.

window.print();
звезда
источник
0

Я знаю, что ответ уже был предоставлен. Но я просто хотел уточнить, как это сделать в приложении Blazor (бритва) ...

Вам нужно будет ввести IJSRuntime, чтобы выполнить JSInterop (запуск функций javascript из C #)

НА СТРАНИЦЕ БРИТВЫ:

@inject IJSRuntime JSRuntime

Как только вы сделаете это, создайте кнопку с событием click, которое вызывает метод C #:

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

(или что-то более простое, если вы не используете MatBlazor)

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

Для метода C #:

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

ТЕПЕРЬ В ВАШЕМ index.html:

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

Обратите внимание: причина, по которой события onclick являются асинхронными, заключается в том, что IJSRuntime ожидает таких вызовов, как InvokeVoidAsync.

PS: Если вы хотите сообщение в ядре asp net, например:

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

Чтобы иметь окно подтверждения сообщения:

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
    }

Надеюсь это поможет :)

Джеймс Хеффер
источник
-6

если проблема:

 mywindow.print();

альтернативное использование:

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

Полный:

 $('.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;
    });
Безграничный Иса
источник
3
зачем ты все это объединяешь? '<scr' + 'ipt> print () </ scr' + 'ipt>'
CRice