जावास्क्रिप्ट रिपोर्ट में कस्टम फ़ॉन्ट्स का उपयोग करना

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

जावास्क्रिप्ट के लचीलेपन से मेल खाने के लिए, ActiveReportsJS उपयोगकर्ताओं को रिपोर्ट के भीतर टेक्स्ट को भारी रूप से अनुकूलित करने की अनुमति देता है। इस लेख में, हम इस बात पर ध्यान केंद्रित करेंगे कि आप निम्नलिखित विषयों को कवर करते हुए फ़ॉन्ट को अनुकूलित करने के लिए ActiveReportsJS डिज़ाइनर की क्षमता का लाभ कैसे उठा सकते हैं:

• फ़ॉन्ट्स की मूल बातें

• स्टैंडअलोन डिज़ाइनर एप्लिकेशन को कॉन्फ़िगर करना

• ActiveReportsJS-आधारित अनुप्रयोगों को कॉन्फ़िगर करना

• रिपोर्ट डिज़ाइनर घटक को कॉन्फ़िगर करना

  
  

फ़ॉन्ट्स की मूल बातें

सभी ActiveReportsJS घटक एक वेब ब्राउज़र वातावरण में काम करते हैं:

• स्टैंडअलोन रिपोर्ट डिज़ाइनर इलेक्ट्रॉन के साथ बनाया गया है, जो उपयोगकर्ता इंटरफ़ेस प्रदर्शित करने के लिए क्रोमियम का उपयोग करता है।

• जावास्क्रिप्ट रिपोर्ट व्यूअर और डिज़ाइनर घटक एक वेब एप्लिकेशन के भाग हैं जो उपयोगकर्ता की मशीन पर ब्राउज़र में चलते हैं।

• पीडीएफ, सारणीबद्ध डेटा और HTML निर्यात फ़िल्टर रिपोर्ट सामग्री को मापने के लिए एक वेब ब्राउज़र वातावरण का उपयोग करते हैं।

  
  

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

ActiveReportsJS की सभी पाठ्य सामग्री में कई फ़ॉन्ट गुण होते हैं, जिनमें शामिल हैं:

• फ़ॉन्ट परिवार : फ़ॉन्ट आईडी, यानी, एरियल, कैलाबरी, या टाइम्स न्यू रोमन।
• फ़ॉन्ट शैली : सामान्य या इटैलिक.
• फ़ॉन्ट वजन : पतला, अतिरिक्त हल्का, सामान्य, मध्यम, सेमीबोल्ड, बोल्ड, अतिरिक्त बोल्ड, भारी।

इन तीन गुणों के एक अद्वितीय संयोजन को फॉन्ट फेस कहा जाता है। एक फ़ॉन्ट परिवार में आम तौर पर कई फ़ॉन्ट चेहरे होते हैं, जो (सामान्यतः) कई फ़ाइलों द्वारा दर्शाए जाते हैं।

उदाहरण के लिए, कैलीबरी फ़ॉन्ट परिवार में छह अलग-अलग फ़ॉन्ट चेहरे हैं:

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

डाउनलोड करने योग्य फ़ॉन्ट संसाधनों को बनाए रखना आसान है; सभी आधुनिक ब्राउज़र उनका समर्थन करते हैं, और यह सभी वातावरणों में पाठ्य सामग्री के लगातार आउटपुट की गारंटी देता है। इसके अलावा, ActiveReportsJS पीडीएफ एक्सपोर्ट को डाउनलोड करने योग्य फ़ॉन्ट की आवश्यकता होती है क्योंकि यह उनके सबसेट को पीडीएफ दस्तावेज़ में एम्बेड करता है। इसलिए, सभी वातावरणों में लगातार रिपोर्ट आउटपुट सुनिश्चित करने का सबसे अच्छा तरीका डाउनलोड करने योग्य फ़ॉन्ट संसाधनों तक पहुंचने के लिए ActiveReportsJS घटकों को कॉन्फ़िगर करना है।

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

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

स्टैंडअलोन रिपोर्ट डिज़ाइनर को कॉन्फ़िगर करना

स्टैंडअलोन डिज़ाइनर में एक फ़ॉन्ट परिवार जोड़ने के लिए, आपको सबसे पहले उस फ़ोल्डर पर नेविगेट करना होगा जिसमें ActiveReportsJS फ़ॉन्ट कॉन्फ़िगरेशन फ़ाइल है। ये आपके ऑपरेटिंग सिस्टम के आधार पर निम्नलिखित स्थानों पर हैं:

• विंडोज़ : %AppData%\ActiveReportsJS डिज़ाइनर\fontsConfig.json

• macOS : ~/Library/एप्लिकेशन सपोर्ट/ActiveReportsJS डिज़ाइनर/fontsConfig.json

• लिनक्स : ~/.config/ActivereportsJS डिज़ाइनर/fontsConfig.json

  
  

इस स्थान पर, फ़ॉन्ट्स नामक एक फ़ोल्डर बनाएं और उन सभी फ़ॉन्ट चेहरों की सभी फ़ाइलों को कॉपी करें जिन्हें आप इस फ़ोल्डर में उपयोग करने की योजना बना रहे हैं।

फिर, अपनी पसंद के टेक्स्ट एडिटर में fontsConfig.json फ़ाइल खोलें। इस फ़ाइल में फ़ॉन्ट रेस के लिए डिस्क्रिप्टर शामिल हैं जिनका उपयोग एक रिपोर्ट लेखक पाठ्य सामग्री के लिए करेगा। पथ संपत्ति में, फ़ॉन्ट निर्देशिका के मूल फ़ोल्डर के लिए पूर्ण पथ निर्दिष्ट करें। डिस्क्रिप्टर सरणी के डिफ़ॉल्ट आइटम को वांछित फ़ॉन्ट चेहरों के डिस्क्रिप्टर से बदलें।

प्रत्येक वर्णनकर्ता में निम्नलिखित गुण शामिल हैं:

उदाहरण के लिए, मोंटसेराट फ़ॉन्ट के नियमित, इटैलिक और बोल्ड चेहरों को अनुमति देने के लिए, आप निम्नलिखित विवरणकों का उपयोग करेंगे:

 { "name": "Montserrat", "weight": "400", "style": "normal", "source": "Fonts/Montserrat/Montserrat-Regular.ttf" }, { "name": "Montserrat", "weight": "400", "style": "italic", "source": "Fonts/Montserrat/Montserrat-Italic.ttf" }, { "name": "Montserrat", "weight": "700", "style": "normal", "source": "Fonts/Montserrat/Montserrat-Bold.ttf" }

स्टैंडअलोन डिज़ाइनर एप्लिकेशन चलाएँ, रिपोर्ट के मुख्य भाग में एक टेक्स्टबॉक्स जोड़ें, और सुनिश्चित करें कि आप इसकी फ़ॉन्ट फ़ैमिली प्रॉपर्टी को उन फ़ॉन्ट्स में से एक पर सेट कर सकते हैं जिन्हें आपने फ़ॉन्टकॉन्फिग.जेसन फ़ाइल में गिना है और सभी फ़ॉन्ट चेहरे सही ढंग से प्रदर्शित होते हैं।

ActiveReportsJS-आधारित अनुप्रयोगों को कॉन्फ़िगर करना

एक एप्लिकेशन जो जावास्क्रिप्ट रिपोर्ट व्यूअर में रिपोर्ट प्रदर्शित करता है, पीडीएफ में रिपोर्ट निर्यात करता है या रिपोर्ट डिजाइनर घटक को होस्ट करता है, उसे उसी कॉन्फ़िगरेशन का उपयोग करना चाहिए जो आपने स्टैंडअलोन डिजाइनर एप्लिकेशन के लिए बनाया था। इसे प्राप्त करने का सबसे आसान तरीका फ़ॉन्ट फ़ोल्डर और फ़ॉन्ट कॉन्फिग.json फ़ाइल को अपने एप्लिकेशन के स्थिर संपत्ति फ़ोल्डर में कॉपी करना है।

यह फ़ोल्डर अलग-अलग फ्रंट-एंड फ्रेमवर्क के लिए अलग-अलग होता है। कुछ उदाहरण निम्नलिखित हैं:

• कोणीय : संपत्ति विन्यास का उपयोग करता है; यदि फ़ॉन्ट्स फ़ोल्डर और फ़ॉन्टकॉन्फिग.जेसन फ़ाइल को संपत्ति फ़ोल्डर में कॉपी किया गया है, तो फ़ॉन्ट्सकॉन्फिग.जेसन फ़ाइल में फ़ॉन्ट डिस्क्रिप्टर के स्रोत गुणों को संशोधित करें ताकि वे संपत्तियों से शुरू हो सकें। उदाहरण के लिए:

  { "नाम": "मोंटसेराट", "वजन": "900", "शैली": "इटैलिक", "स्रोत": "संपत्ति/फ़ॉन्ट/मोंटसेराट/मोंटसेराट-ब्लैकइटैलिक.ttf" }

• प्रतिक्रिया : create-react-app के साथ बनाए गए एप्लिकेशन के लिए सार्वजनिक फ़ोल्डर का उपयोग करता है।

• Vue : स्थैतिक संपत्ति प्रबंधन का उपयोग करता है।

  
  

अंत में, एप्लिकेशन को फ़ॉन्टकॉन्फिग फ़ाइल के यूआरएल के साथ फ़ॉन्टस्टोर ऑब्जेक्ट की रजिस्टरफॉन्ट विधि को कॉल करना चाहिए। यह कोड एप्लिकेशन द्वारा रिपोर्ट प्रदर्शित या निर्यात शुरू करने से पहले चलना चाहिए। ध्यान दें कि रजिस्टरफ़ॉन्ट विधि अतुल्यकालिक है और एक प्रॉमिस ऑब्जेक्ट लौटाती है।

इस पद्धति को कॉल करने वाला कोड व्यूअर घटक में रिपोर्ट लोड करने या उन्हें निर्यात करने से पहले इस लौटाए गए वादे के हल होने तक प्रतीक्षा भी कर सकता है।

शुद्ध जावास्क्रिप्ट अनुप्रयोगों के लिए, कोड इस तरह दिखेगा:

 <script src="https://cdn.grapecity.com/activereportsjs/2.2.0/dist/ar-js-core.js"></script> <script> GC.ActiveReports.Core.FontStore.registerFonts( "/resources/fontsConfig.json" // replace the URL with the actual one ) </script>

Angular , React , और Vue अनुप्रयोगों के लिए:

 import { Core } from "@grapecity/activereports"; Core.FontStore.registerFonts("/assets/fontConfig.json") // replace the URL with the actual one

आप हमारे लाइव डेमो में इस कोड के उदाहरण पा सकते हैं।

रिपोर्ट डिज़ाइनर घटक को कॉन्फ़िगर करना

अंत में, यह सुनिश्चित करने के लिए कि रिपोर्ट डिज़ाइनर घटक केवल पंजीकृत फ़ॉन्ट प्रदर्शित करता है, डिज़ाइनर इंस्टेंस की फ़ॉन्टसेट संपत्ति को पंजीकृत पर सेट करें।

इसके अलावा, यदि आप यह सुनिश्चित करना चाहते हैं कि नए जोड़े गए रिपोर्ट आइटम में डिफ़ॉल्ट रूप से पंजीकृत फ़ॉन्ट में से एक है, तो आप कस्टम इनिट टेम्पलेट सुविधा का उपयोग कर सकते हैं।

निष्कर्ष

और इसके साथ ही, हम लेख के अंत पर आ गए हैं। जैसा कि हमने चर्चा की है, फोंट डेवलपर्स के लिए सौंदर्यशास्त्र और पठनीयता बढ़ाने का एक शक्तिशाली तरीका है। इस लेख में, हमने दिखाया है कि ActiveReportsJS रिपोर्ट डिज़ाइनर और व्यूअर के माध्यम से अपनी रिपोर्ट में कस्टम फ़ॉन्ट शामिल करना कितना आसान है।

हैप्पी कोडिंग!