如何使用 Javascript 弹出打印对话框？答案

【问题标题】：How can I pop-up a print dialog box using Javascript?如何使用 Javascript 弹出打印对话框？
【发布时间】：2010-09-19 12:32:16
【问题描述】：

我有一个带有“打印”链接的页面，该链接将用户带到一个适合打印的页面。客户希望在用户到达打印友好页面时自动出现一个打印对话框。我怎样才能用 javascript 做到这一点？

【问题讨论】：

标签： javascript

【解决方案1】：

window.print();

除非您指的是自定义外观的弹出窗口。

【讨论】：

有点老了，但我喜欢添加... window.print();setTimeout("window.close()", 100); .这会等待足够的时间来加载页面的其余部分，但随后会挂起，直到按下或取消打印对话框上的打印按钮，然后再次巧妙地关闭选项卡。

【解决方案2】：

你可以的

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

【讨论】：

【解决方案3】：

我喜欢这样，这样你就可以添加任何你想要的字段并以这种方式打印。

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

【讨论】：

这对我来说就像一个魅力。需要在浏览器中允许弹出窗口。我不确定“关闭”是否会被执行，因为标签永远不会消失。

【解决方案4】：

我这样做是为了确保他们记得打印横向，这对于许多打印机上的许多页面都是必需的。

<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>

【讨论】：

【解决方案5】：

如果您只有一个没有点击事件处理程序的链接：

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

【讨论】：

【解决方案6】：

您可以将其绑定到按钮或页面加载。

window.print();

【讨论】：

【解决方案7】：

我知道答案已经提供。但我只是想详细说明在 Blazor 应用程序（剃刀）中执行此操作...

您需要注入 IJSRuntime，以执行 JSInterop（从 C# 运行 javascript 函数）

在您的剃须刀页面中：

@inject IJSRuntime JSRuntime

注入后，创建一个带有单击事件的按钮，该事件调用 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 core 中显示消息框：

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
    }

希望这会有所帮助:)

【讨论】：

【解决方案8】：

<script>
    const _print = () => {
        window.print();
    }
</script>

或

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

在此处查看文档：https://developer.mozilla.org/en-US/docs/Web/API/Window/print

【讨论】：

【解决方案9】：

如果有问题：

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

【讨论】：

你为什么要把它连接在一起呢？ 'print()'+'ipt>'