Mam stronę z łączem „Drukuj”, które przenosi użytkownika na stronę do druku. Klient chce, aby okno dialogowe drukowania pojawiło się automatycznie, gdy użytkownik dotrze do strony, którą można wydrukować. Jak mogę to zrobić za pomocą JavaScript?
Mam stronę z łączem „Drukuj”, które przenosi użytkownika na stronę do druku. Klient chce, aby okno dialogowe drukowania pojawiło się automatycznie, gdy użytkownik dotrze do strony, którą można wydrukować. Jak mogę to zrobić za pomocą JavaScript?
Odpowiedzi:
window.print(); chyba że masz na myśli niestandardowe wyskakujące okienko.
Podoba mi się to, że możesz dodać dowolne pola i wydrukować to w ten sposób.
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();
};Robię to, aby upewnić się, że pamiętają o drukowaniu w orientacji poziomej, co jest niezbędne w przypadku wielu stron na wielu drukarkach.
<a href="javascript:alert('Please be sure to set your printer to Landscape.');window.print();">Print Me...</a>lub
<body onload="alert('Please be sure to set your printer to Landscape.');window.print();">
etc.
</body>Jeśli masz tylko link bez modułu obsługi zdarzenia kliknięcia:
<a href="javascript:window.print();">Print Page</a>Wiem, że odpowiedź została już udzielona. Ale chciałem tylko rozwinąć kwestię robienia tego w aplikacji Blazor (maszynka do golenia) ...
Będziesz musiał wstrzyknąć IJSRuntime, aby wykonać JSInterop (uruchamianie funkcji javascript z C #)
NA TWOJEJ STRONIE RAZOR:
@inject IJSRuntime JSRuntimePo wstrzyknięciu utwórz przycisk ze zdarzeniem click, które wywołuje metodę C #:
<MatFAB Icon="@MatIconNames.Print" OnClick="@(async () => await print())"></MatFAB>(lub coś prostszego, jeśli nie używasz MatBlazor)
<button @onclick="@(async () => await print())">PRINT</button>Dla metody C #:
public async Task print()
{
await JSRuntime.InvokeVoidAsync("printDocument");
}TERAZ W TWOIM index.html:
<script>
function printDocument() {
window.print();
}
</script>Coś, na co należy zwrócić uwagę, powodem, dla którego zdarzenia onclick są asynchroniczne, jest to, że IJSRuntime oczekuje na wywołania, takie jak InvokeVoidAsync
PS: Jeśli chcesz, aby na przykład okno komunikatu w asp net core:
await JSRuntime.InvokeAsync<string>("alert", "Hello user, this is the message box");Aby mieć wiadomość z potwierdzeniem:
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
}Mam nadzieję że to pomoże :)
jeśli problem:
mywindow.print();alternatywnie za pomocą:
'<scr'+'ipt>print()</scr'+'ipt>'Pełny:
$('.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;
});