मेरे पास एक "प्रिंट" लिंक वाला एक पृष्ठ है जो उपयोगकर्ता को एक प्रिंटर-अनुकूल पृष्ठ पर ले जाता है। क्लाइंट चाहता है कि जब उपयोगकर्ता प्रिंट-फ्रेंडली पेज पर आए तो एक डायलॉग बॉक्स अपने आप दिखाई दे। मैं जावास्क्रिप्ट के साथ यह कैसे कर सकता हूं?
मेरे पास एक "प्रिंट" लिंक वाला एक पृष्ठ है जो उपयोगकर्ता को एक प्रिंटर-अनुकूल पृष्ठ पर ले जाता है। क्लाइंट चाहता है कि जब उपयोगकर्ता प्रिंट-फ्रेंडली पेज पर आए तो एक डायलॉग बॉक्स अपने आप दिखाई दे। मैं जावास्क्रिप्ट के साथ यह कैसे कर सकता हूं?
जवाबों:
window.print(); जब तक आपका मतलब कस्टम लुकिंग पॉपअप नहीं है।
मुझे यह पसंद है, ताकि आप जो भी फ़ील्ड चाहें उसे जोड़ सकें और उस तरह से प्रिंट कर सकें।
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>मुझे पता है कि उत्तर पहले ही प्रदान किया जा चुका है। लेकिन मैं सिर्फ एक Blazor ऐप (रेजर) में ऐसा करने के संबंध में विस्तार से बताना चाहता था ...
JSInterop (C # से जावास्क्रिप्ट कार्य चलाना) करने के लिए, आपको IJSRuntime इंजेक्षन करने की आवश्यकता होगी
अपने पृष्ठ में:
@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>ध्यान देने योग्य बात, ऑन्कलिक घटनाओं के कारण अतुल्यकालिक हैं, क्योंकि IJSRuntime का इंतजार है, जैसे कि InvokeVoidAsync
पुनश्च: यदि आप उदाहरण के लिए एस्प नेट कोर में बॉक्स को संदेश देना चाहते हैं:
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;
});