PrintDiv (divId) : किसी भी पेज पर किसी भी div को प्रिंट करने के लिए एक सामान्यीकृत समाधान।
मेरे पास एक समान मुद्दा था लेकिन मैं चाहता था (ए) पूरे पृष्ठ को प्रिंट करने में सक्षम हो, या (बी) कई विशिष्ट क्षेत्रों में से किसी एक को प्रिंट कर सकता हूं। मेरा समाधान, उपरोक्त में से अधिकांश के लिए धन्यवाद, आपको किसी भी दिव्य वस्तु को मुद्रित करने के लिए निर्दिष्ट करने की अनुमति देता है।
इस समाधान के लिए कुंजी प्रिंट मीडिया स्टाइल शीट में एक उचित नियम जोड़ना है ताकि अनुरोधित डिव (और इसकी सामग्री) प्रिंट हो जाए।
सबसे पहले, सब कुछ दबाने के लिए आवश्यक प्रिंट सीएसएस बनाएं (लेकिन उस विशिष्ट नियम के बिना जिसे आप प्रिंट करना चाहते हैं।)
<style type="text/css" media="print">
body {visibility:hidden; }
.noprintarea {visibility:hidden; display:none}
.noprintcontent { visibility:hidden; }
.print { visibility:visible; display:block; }
</style>
ध्यान दें कि मैंने नए वर्ग नियम जोड़े हैं:
- noprintarea आपको अपने div- सामग्री और ब्लॉक दोनों के भीतर तत्वों की छपाई को दबाने की अनुमति देता है।
- noprintcontent आपको अपने div के भीतर तत्वों की छपाई को दबाने की अनुमति देता है- सामग्री को दबा दिया जाता है लेकिन आवंटित क्षेत्र को खाली छोड़ दिया जाता है।
- प्रिंट आपको उन आइटमों की अनुमति देता है जो मुद्रित संस्करण में दिखाई देते हैं, लेकिन स्क्रीन पृष्ठ पर नहीं। ये सामान्य रूप से स्क्रीन शैली के लिए "प्रदर्शन: कोई नहीं" होगा।
फिर तीन जावास्क्रिप्ट फ़ंक्शंस डालें। पहले केवल प्रिंट मीडिया स्टाइल शीट को चालू और बंद करता है।
function disableSheet(thisSheet,setDisabled)
{ document.styleSheets[thisSheet].disabled=setDisabled; }
दूसरा असली काम करता है और तीसरा बाद में सफाई करता है। दूसरा (प्रिंटडिव) प्रिंट मीडिया स्टाइल शीट को सक्रिय करता है, फिर एक नया नियम लागू करता है ताकि वांछित डिव को प्रिंट करने की अनुमति दी जा सके, प्रिंट जारी किया जा सके, और फिर अंतिम हाउसकीपिंग से पहले एक देरी जोड़ता है (अन्यथा स्टाइल वास्तव में प्रिंट से पहले रीसेट किया जा सकता है) किया हुआ।)
function printDiv(divId)
{
// Enable the print CSS: (this temporarily disables being able to print the whole page)
disableSheet(0,false);
// Get the print style sheet and add a new rule for this div
var sheetObj=document.styleSheets[0];
var showDivCSS="visibility:visible;display:block;position:absolute;top:30px;left:30px;";
if (sheetObj.rules) { sheetObj.addRule("#"+divId,showDivCSS); }
else { sheetObj.insertRule("#"+divId+"{"+showDivCSS+"}",sheetObj.cssRules.length); }
print();
// need a brief delay or the whole page will print
setTimeout("printDivRestore()",100);
}
अंतिम फ़ंक्शन जोड़े गए नियम को हटा देता है और प्रिंट शैली को अक्षम करने के लिए फिर से सेट करता है ताकि पूरे पृष्ठ को प्रिंट किया जा सके।
function printDivRestore()
{
// remove the div-specific rule
var sheetObj=document.styleSheets[0];
if (sheetObj.rules) { sheetObj.removeRule(sheetObj.rules.length-1); }
else { sheetObj.deleteRule(sheetObj.cssRules.length-1); }
// and re-enable whole page printing
disableSheet(0,true);
}
केवल दूसरी बात यह है कि आपके ऑनलोड प्रोसेसिंग में एक पंक्ति को जोड़ना है ताकि प्रिंट शैली शुरू में अक्षम हो जाए जिससे पूरे पेज प्रिंटिंग की अनुमति मिल सके।
<body onLoad='disableSheet(0,true)'>
फिर, अपने दस्तावेज़ में कहीं से भी, आप एक div प्रिंट कर सकते हैं। बस एक बटन या जो भी हो, उससे PrintDiv ("thedivid") जारी करें।
इस दृष्टिकोण के लिए एक बड़ा प्लस यह एक पृष्ठ के भीतर से चयनित सामग्री को मुद्रित करने के लिए एक सामान्य समाधान प्रदान करता है। यह उन तत्वों के लिए मौजूदा शैलियों का उपयोग करने की भी अनुमति देता है जो मुद्रित होते हैं - जिसमें div शामिल है।
नोट: मेरे कार्यान्वयन में, यह पहली शैली शीट होनी चाहिए। यदि आप शीट अनुक्रम में इसे बाद में बनाना चाहते हैं, तो शीट संदर्भ (0) को उपयुक्त शीट नंबर में बदलें।