2014-11-06 5 views
7

के साथ नए प्रिंट संवाद विंडो खोलें वर्तमान पृष्ठ का प्रिंट संवाद खोलने के लिए आदेश में हम ऐसा कुछ कर:अलग HTML सामग्री

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

कैसे वर्तमान पृष्ठ कि प्रिंट खुलेगा में एक लिंक बनाने के लिए वास्तविक पृष्ठ से अलग संदर्भ के साथ संवाद? क्रोम में


प्रिंट करें संवाद बॉक्स: enter image description here

उत्तर

7

Print Dialog

के आसपास खेल रहे हैं (और कुछ Googling) के बाद, मैं this समाधान के साथ बाहर आया था:

मैं प्रिंट करने योग्य कंटेनर तत्व को वर्तमान दृश्य और printable वर्ग के लिए एक non-printable वर्ग गयी। मेरी सीएसएस में, मैं css media queries इस्तेमाल किया जहां @media screen और @media print राज्यों इसी प्रदर्शन व्यवहार होता है: अब

@media screen { 
    .printable { display: none; } 
    .non-printable { display: block; } 
} 
@media print { 
    .printable { display: block; } 
    .non-printable { display: none; } 
} 

, मैं बिना मेरे वर्तमान दृश्य से नई सामग्री मुद्रित कर सकते हैं एक नया टैब खोलें या मेरे वर्तमान दृश्य बदल रहा है।

यह jsFiddle और supported browser की सूची देखें।

7

मैं अगर यह वास्तव में अपने प्रश्न का उत्तर है के बाद से अपने सवाल आप खुलने से क्या मतलब है के बारे में बहुत कम विस्तार है यकीन नहीं है एक नई खिड़की

यदि आप/पेज/एक पर हैं और आप एक लिंक खोलना/रिपोर्ट/पेज चाहते हैं और स्वचालित रूप से प्रिंट संवाद लाएं ... तो यह लोड ईवेंट पर window.print ट्रिगर करने जितना आसान है, उदा।

<body onload='window.print()'> 

आप हमेशा प्रिंट संवाद खोलने के लिए, तो जब आप प्रिंट करना चाहते उस प्रभाव के लिए नया पृष्ठ /report/page?print=1 या कुछ और के लिए लिंक बनाने के लिए, और जब आप उस URL में लगता है कि पेज नहीं चाहते हैं ऑनलोड घटना ट्रिगर करें।

0

नामक एक अच्छी जावास्क्रिप्ट प्लगइन है यह प्रिंट करें जो इसे बहुत आसानी से पूरा करता है।

तुम बस जैसे किसी jQuery चयनकर्ता का उपयोग और प्लगइन कॉल करने के लिए, की जरूरत है .:

$('selector').printThis(); 

https://github.com/jasonday/printThis

0

एक div में प्रिंट करने योग्य सामग्री को शामिल करें। जैसा:

HTML:

<div id='printarea'> 
    <p>This is a sample text for printing purpose.</p> 
    <input type='button' id='btn' value='Print' onclick='printFunc();'> 
</div> 
<p>Do not print.</p> 

JQuery:

function printFunc() { 
    var divToPrint = document.getElementById('printarea'); 
    var htmlToPrint = '' + 
     '<style type="text/css">' + 
     'table th, table td {' + 
     'border:1px solid #000;' + 
     'padding;0.5em;' + 
     '}' + 
     '</style>'; 
    htmlToPrint += divToPrint.outerHTML; 
    newWin = window.open(""); 
    newWin.document.write("<h3 align='center'>Print Page</h3>"); 
    newWin.document.write(htmlToPrint); 
    newWin.print(); 
    newWin.close(); 
    } 

यह सिर्फ प्रिंट करने योग्य div.Thanks प्रिंट होगा

संबंधित मुद्दे