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

我有一个带有“打印”链接的页面，该链接将用户带到一个打印机友好的页面。当用户到达打印友好页面时，客户端希望自动显示打印对话框。我如何使用 javascript 做到这一点？

134110 次浏览
小开
最佳答案 
window.print();

除非你说的是定制的弹出窗口。

小开

你可以的

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

我这样做，以确保他们记得打印景观，这是必要的很多页上的很多打印机。

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

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

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

如有问题:

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

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

window.print();
小开

如果您只有一个没有 click 事件处理程序的链接:

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

我知道答案已经提供了。但是我只是想详细说明关于在 Blazor 应用程序(剃须刀)中这样做..。

为了执行 JSInterop (从 C # 运行 javascript 函数) ，需要注入 IJSRuntime

在你的剃须刀页面:

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

现在在你的索引里:

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

希望这对你有帮助:)

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

或者

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

请参阅这里的文档: https://developer.mozilla.org/en-US/docs/Web/API/Window/print

小开

我知道这是一个老问题，但在与这个类似的问题斗争之后，我想出了一个方法来打开一个打印屏幕和 没有必须打开一个新的标签，和 没有必须启用弹出窗口。

希望这能帮到别人。

/*
Example:
<a href="//example.com" class="print-url">Print</a>
*/


//LISTEN FOR PRINT URL ITEMS TO BE CLICKED
$(document).off('click.PrintUrl').on('click.PrintUrl', '.print-url', function(e){


//PREVENT OTHER CLICK EVENTS FROM PROPAGATING
e.preventDefault();


//TRY TO ASK THE URL TO TRIGGER A PRINT DIALOGUE BOX
printUrl($(this).attr('href'));
});


//TRIGGER A PRINT DIALOGE BOX FROM A URL
function printUrl(url) {


//CREATE A HIDDEN IFRAME AND APPEND IT TO THE BODY THEN WAIT FOR IT TO LOAD
$('<iframe src="'+url+'"></iframe>').hide().appendTo('body').on('load', function(){
        

var oldTitle    = $(document).attr('title');                //GET THE ORIGINAL DOCUMENT TITLE
var that        = $(this);                                  //STORE THIS IFRAME AS A VARIABLE
var title       = $(that).contents().find('title').text();  //GET THE IFRAME TITLE
$(that).focus();                                            //CALL THE IFRAME INTO FOCUS (FOR OLDER BROWSERS)


//SET THE DOCUMENT TITLE FROM THE IFRAME (THIS NAMES THE DOWNLOADED FILE)
if(title && title.length) $(document).attr('title', title);
        

//TRIGGER THE IFRAME TO CALL THE PRINT
$(that)[0].contentWindow.print();


//LISTEN FOR THE PRINT DIALOGUE BOX TO CLOSE
$(window).off('focus.PrintUrl').on('focus.PrintUrl', function(e){
e.stopPropagation();                                            //PREVENT OTHER WINDOW FOCUS EVENTS FROM RUNNING
$(that).remove();                                               //GET RID OF THE IFRAME
if(title && title.length) $(document).attr('title', oldTitle);  //RESET THE PAGE TITLE
$(window).off('focus.PrintUrl');                                //STOP LISTENING FOR WINDOW FOCUS
});
});
};

提交答案