ब्राउज़र से प्रिंट करें

वेब आ रहा है। अधिक से अधिक पारंपरिक डेस्कटॉप एप्लिकेशन इंटरनेट पर जा रहे हैं। पहले से ही कोई भी ऑनलाइन पाठ या ग्राफिक्स संपादक से आश्चर्यचकित नहीं है। और पहले से ही विभिन्न बहु-उपयोगकर्ता परिसरों, डेटाबेस, रिपोर्टिंग सिस्टम - यहां वेब प्रौद्योगिकियों के लिए विस्तार किया गया है। उदाहरण के लिए, कुछ साल पहले ग्राहकों के पंजीकरण और पंजीकरण के लिए एक सिस्टम बनाना काफी सामान्य होगा, डेल्फी में एक दंत चिकित्सा क्लिनिक या लाइब्रेरी का कहना है, एक डेटाबेस और एक नेटवर्क भाग जोड़ें। लेकिन अब ऐसा समाधान अनुचित होगा: यह बहुत सरल है, अधिक सुविधाजनक है, और इसलिए वेब द्वारा हमें प्रदान की जाने वाली हर चीज का उपयोग करने के लिए अधिक कुशल है, भले ही आवेदन केवल स्थानीय नेटवर्क के अंदर ही उपयोग किया जाएगा। इसके अलावा, यह समाधान क्रॉस-प्लेटफ़ॉर्म है, जो मुक्त ओएस में संक्रमण के उभरते रुझान के संबंध में प्रासंगिक है। क्लाइंट कंप्यूटर पर सभी आवश्यक है एक ब्राउज़र, कोई सेटिंग्स, सेटिंग्स, और अधिक।



लेकिन वेब पर सब कुछ करने के निर्णय में एक खामी है (एक भी नहीं, लेकिन मैं अब सब कुछ सूचीबद्ध नहीं करूंगा): रिपोर्ट, लेटरहेड और अन्य मुद्रित पृष्ठों की छपाई की असुविधा। यह इस तथ्य के कारण है कि वेब पेजों की गणना मुख्य रूप से मॉनिटर स्क्रीन पर प्रदर्शित करने के लिए की जाती है और मुद्रण के लिए विगलित नहीं होती है, जो अक्सर मुद्रित पृष्ठ को रेंगने की ओर ले जाती है। सौभाग्य से, ये सभी अस्थायी कठिनाइयाँ हैं और इन्हें दरकिनार किया जा सकता है। उदाहरण के लिए, आप पीडीएफ या डॉक में रिपोर्ट उत्पन्न कर सकते हैं। लेकिन मुझे लगता है कि यह बहुत सुविधाजनक नहीं है: उपयोगकर्ता को उन प्रारूपों के साथ काम करने वाले कार्यक्रमों को स्थापित करने की आवश्यकता होती है, जो हर बार सर्वर से उत्पन्न फ़ाइल को डाउनलोड करते हैं, तृतीय-पक्ष प्रोग्राम से प्रिंट करते हैं, ब्राउज़र नहीं। इसलिए, यह उन पृष्ठों को बनाने के प्रयास के लायक है जो सीधे ब्राउज़र से प्रिंट करते हैं।





चूंकि स्क्रीन पर डिस्प्ले और प्रिंटिंग के लिए पेज के अलग-अलग संस्करण हैं, इसलिए सीएसएस को उनके उद्देश्य के अनुसार दो भागों में विभाजित करना आवश्यक है। स्क्रीन पर प्रदर्शन के लिए विशेष तत्वों के गुणों को ब्लॉक में संग्रहीत किया जाएगा

मीडिया स्क्रीन {}

और मुद्रण के लिए, क्रमशः, में

मीडिया प्रिंट {}



पहली बात यह है कि सभी अनावश्यक ग्राफिक तत्वों को अक्षम करना है: बैनर (वे एक स्थानीय नेटवर्क के लिए वेब एप्लिकेशन में होने की संभावना नहीं है), एक मेनू, कुछ और। यह सीएसएस में निम्नलिखित निर्माण द्वारा प्राप्त किया गया है:



मीडिया प्रिंट {

.banner {प्रदर्शन: कोई नहीं ;;

}



हम अन्य अतिरिक्त ब्लॉकों के प्रदर्शन पर भी रोक लगाते हैं। शायद, इसके विपरीत, कुछ ब्लॉकों को प्रिंट करते समय प्रदर्शित किया जाना चाहिए, और स्क्रीन पर छिपाया जाना चाहिए। एक सुंदर रंग का लोगो संभवतः एक काले और सफेद प्रिंटर को गंदे पर प्रिंट करेगा या पर्याप्त रूप से स्पष्ट नहीं होगा, यह एक विशेष विपरीत रंग के साथ इसे बदलने के लायक है:

मीडिया स्क्रीन {

div.logo {बैकग्राउंड: url (img / logo.png) नो-रिपीट टॉप;}

}

मीडिया प्रिंट {

div.logo {बैकग्राउंड: url (img / logo_print.png) नो-रिपीट टॉप;}

}



सबसे अधिक संभावना है कि वेब एप्लिकेशन का उपयोगकर्ता ए 4 प्रिंटर पर पेज प्रिंट करेगा (जब तक कि यह एप्लिकेशन प्रिंटिंग के लिए न हो)। पृष्ठ निर्माण सम्मिलित करके पृष्ठ को वांछित आकार तक सीमित करें। आप पृष्ठ आकार निर्दिष्ट कर सकते हैं (पिक्सेल में, किसी भी स्थिति में सेंटीमीटर या इंच में आवश्यक है!), इसलिए A4 के लिए यह 8.5x11 इंच या 21x29.7 सेमी है।

पेज {

आकार 8.5in 11in;

मार्जिन: 1 सेमी

}



यदि दो-तरफा छपाई का इरादा है, तो बाएं और दाएं पृष्ठों को प्रतिष्ठित किया जाना चाहिए:

पेज : बायाँ {

मार्जिन-वाम: 4 सेमी;

मार्जिन-राइट: 3 सेमी;

}



पेज : सही {

मार्जिन-वाम: 3 सेमी;

मार्जिन-राइट: 4 सेमी;

}



साथ ही, पृष्ठ पर सभी तत्वों के आकार को सापेक्ष इकाइयों में सेट किया जाना चाहिए। यह फ़ॉन्ट को बदलने के लिए चोट नहीं करता है: सीरीफ फोंट कागज पर बेहतर दिखते हैं।



बहु-पृष्ठ रिपोर्ट या दस्तावेजों के पूर्ण रूपों को प्रिंट करते समय, रिपोर्ट के प्रत्येक भाग की आवश्यकता होगी या प्रत्येक प्रपत्र को एक अलग पृष्ठ पर प्रदर्शित किया जाना चाहिए। क्षैतिज रेखा hr का उपयोग करके स्क्रीन पर पृष्ठ विराम दिखाना मुझे बहुत सुविधाजनक लगा, और जब इस पर छपाई होती है, तो पृष्ठ विराम करते हैं:

मीडिया प्रिंट {

hr {PAGE-BREAK-AFTER: हमेशा; दृश्यता: छिपी;}

}



आपको याद दिला दूं कि PAGE-BREAK-AFTER प्रिंटर को इस संपत्ति के साथ एक आइटम प्रदर्शित करने के बाद अगले पृष्ठ से मुद्रण जारी रखने के लिए बाध्य करता है, और मुद्रण से पहले PAGE-BREAK-BEFORE। मेरे उदाहरण में, मुद्रण करते समय hr (दृश्यता: छिपा हुआ) प्रदर्शित नहीं होता है, लेकिन यह इसे प्रिंटर को नियंत्रित करने से नहीं रोकता है।



मेरी एक परियोजना में, ऑपरेटर को ग्राहक डेटा के साथ एक फॉर्म भरने की आवश्यकता थी, जिसके बाद उसे विशेष प्रारूपण के साथ इस फॉर्म को प्रिंट करने की आवश्यकता हो सकती है। मैंने फॉर्म के इनपुट फ़ील्ड और प्रिंट संस्करण के साथ स्क्रीन पर प्रदर्शन के लिए संस्करण को संयोजित करने के लिए एक पृष्ठ पर निर्णय लिया। यह ऑपरेटर के कार्य को सरल करता है: डेटा दर्ज करने और सहेजने के बाद एक विशेष पृष्ठ को लोड किए बिना "प्रिंट" बटन को दबाने के लिए पर्याप्त है।



ऐसा करने के लिए, मैंने एक खाली दस्तावेज़ फॉर्म के रूप में एक डेटा एंट्री फॉर्म का गठन किया। वैसे, यह एक अच्छा विचार है: फ़ॉर्म कॉम्पैक्ट है और लगभग कागज पर दिखता है। अगला, हम दस्तावेज़ के दो संस्करणों को एक पृष्ठ पर इकट्ठा करते हैं, बड़ी चतुराई से प्रदर्शन संपत्ति में हेरफेर करते हैं। HTML में प्रत्येक क्षेत्र इस तरह दिखता है (सरलीकृत):



:

/>









इस अवधि पर ध्यान दें - यह क्षेत्र के मूल्य को दोहराता है। CSS फ़ाइल है:



मीडिया स्क्रीन {

.field {प्रदर्शन: कोई नहीं ;;

}

मीडिया प्रिंट {

इनपुट {प्रदर्शन: कोई नहीं;}

td {सीमा: 1px ठोस ;;

.field {पाठ-सजावट: रेखांकित करें ;;

}



इस प्रकार, जब स्क्रीन पर प्रदर्शित किया जाता है, तो हम इनपुट फ़ील्ड देखते हैं, और जब मुद्रित होता है, तो समाप्त परिणाम।



अंत में, मैं एक अप्रिय क्षण के बारे में कहना चाहता हूं। ब्राउज़र अपने पृष्ठ फ़ील्ड और हेडर सेट करता है। यह एक ही बार में दस्तावेज़ के संपूर्ण सुंदर रूप से बने स्वरूप को बिगाड़ सकता है या पृष्ठ को दो में बदल सकता है। जावास्क्रिप्ट इस समस्या को हल नहीं करेगा। इसलिए, यह केवल उपयोगकर्ता (रिमाइंडर को हाइलाइट करने) को ब्राउज़र में फ़ील्ड और हेडर को हटाने के लिए पूछने के लिए रहता है।