How can I pop-up a print dialog box using Javascript?

后端未结

关注

 8  1327

I have a page with a \"Print\" link that takes the user to a printer-friendly page. The client wants a print dialog box to appear automatically when the user arrives at the

相关标签:

8条回答

耶瑟儿～

2020-12-07 17:40

if problem:

 mywindow.print();

altenative using:

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

Full:

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

0 讨论(0)

我寻月下人不归

2020-12-07 17:43

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

0 讨论(0)

春和景丽

2020-12-07 17:47
You can tie it to button or on load of the page.
```
window.print();
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
北恋

2020-12-07 17:48
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 :)
0 讨论(0)
发布评论:

提交评论
- 加载中...
半阙折子戏

2020-12-07 17:49
If you just have a link without a click event handler:
```
<a href="javascript:window.print();">Print Page</a>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
深忆病人

2020-12-07 17:50
You could do
```
<body onload="window.print()">
...
</body>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

1 2 下一页