ฉันมีหน้าที่มีลิงก์ "พิมพ์" ที่นำผู้ใช้ไปยังหน้าที่พิมพ์ได้ ไคลเอนต์ต้องการให้กล่องโต้ตอบการพิมพ์ปรากฏขึ้นโดยอัตโนมัติเมื่อผู้ใช้มาถึงหน้าที่พิมพ์ได้ ฉันจะทำสิ่งนี้กับ javascript ได้อย่างไร
ฉันมีหน้าที่มีลิงก์ "พิมพ์" ที่นำผู้ใช้ไปยังหน้าที่พิมพ์ได้ ไคลเอนต์ต้องการให้กล่องโต้ตอบการพิมพ์ปรากฏขึ้นโดยอัตโนมัติเมื่อผู้ใช้มาถึงหน้าที่พิมพ์ได้ ฉันจะทำสิ่งนี้กับ javascript ได้อย่างไร
คำตอบ:
window.print(); นอกเสียจากคุณจะหมายถึงป๊อปอัปที่กำหนดเอง
คุณสามารถทำได้
<body onload="window.print()">
...
</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();
};
ฉันทำเช่นนี้เพื่อให้แน่ใจว่าพวกเขาจำพิมพ์ภูมิซึ่งจำเป็นสำหรับหน้ามากในเครื่องพิมพ์จำนวนมาก
<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>หากคุณมีลิงก์โดยไม่มีตัวจัดการเหตุการณ์คลิก:
<a href="javascript:window.print();">Print Page</a>คุณสามารถผูกมันไว้ที่ปุ่มหรือโหลดหน้าได้
window.print();ฉันรู้คำตอบแล้ว แต่ฉันแค่ต้องการอธิบายอย่างละเอียดเกี่ยวกับการทำสิ่งนี้ในแอพ Blazor (มีดโกน) ...
คุณจะต้องฉีด IJSRuntime เพื่อใช้งาน JSInterop (การเรียกใช้ฟังก์ชันจาวาสคริปต์จาก C #)
ในหน้า RAZOR ของคุณ:
@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
}หวังว่าจะช่วย :)
หากปัญหา:
mywindow.print();ใช้ altenative:
'<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;
});