Menu
To display the Print dialog box, click (Down arrow) of the Print button or the Start Printing button in the Preview screen, and select Check Settings and Print....
JavaScript does not have any print object or print methods. You cannot access output devices from JavaScript. The only exception is that you can call the window.print() method in the browser to print the content of the current window.
You can create and display a Print Setup dialog box by setting the PD_PRINTSETUP flag in a call to the PrintDlg function.
window.print();
unless you mean a custom looking popup.
You could do
<body onload="window.print()">
...
</body>
I like this, so that you can add whatever fields you want and print it that way.
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();
};
I do this to make sure they remember to print landscape, which is necessary for a lot of pages on a lot of printers.
<a href="javascript:alert('Please be sure to set your printer to Landscape.');window.print();">Print Me...</a>
or
<body onload="alert('Please be sure to set your printer to Landscape.');window.print();">
etc.
</body>
If you just have a link without a click event handler:
<a href="javascript:window.print();">Print Page</a>
You can tie it to button or on load of the page.
window.print();
I know the answer has already been provided. But I just wanted to elaborate with regards to doing this in a Blazor app (razor)...
You will need to inject IJSRuntime, in order to perform JSInterop (running javascript functions from C#)
IN YOUR RAZOR PAGE:
@inject IJSRuntime JSRuntime
Once you have that injected, create a button with a click event that calls a C# method:
<MatFAB Icon="@MatIconNames.Print" OnClick="@(async () => await print())"></MatFAB>
(or something more simple if you don't use MatBlazor)
<button @onclick="@(async () => await print())">PRINT</button>
For the C# method:
public async Task print()
{
await JSRuntime.InvokeVoidAsync("printDocument");
}
NOW IN YOUR index.html:
<script>
function printDocument() {
window.print();
}
</script>
Something to note, the reason the onclick events are asynchronous is because IJSRuntime awaits it's calls such as InvokeVoidAsync
PS: If you wanted to message box in asp net core for instance:
await JSRuntime.InvokeAsync<string>("alert", "Hello user, this is the message box");
To have a confirm 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
}
Hope this helps :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With