केंडो यूआई के साथ पीडीएफ में कोणीय पृष्ठ सामग्री को कैसे निर्यात करें

ब्लॉग

केंडो यूआई के साथ पीडीएफ में कोणीय पृष्ठ सामग्री को कैसे निर्यात करें

यदि आपने स्वयं को अपने कोणीय एप्लिकेशन से HTML सामग्री को आसानी से निर्यात करने के लिए एक आसान समाधान की तलाश में पाया है पीडीएफ , तो यह आपके लिए उपयुक्त पोस्ट है। हमें कई कारणों से HTML सामग्री को PDF में निर्यात करने की आवश्यकता हो सकती है, जिसमें इसे दूसरों के साथ साझा करने से लेकर आवश्यक रूप से इंटरनेट का उपयोग किए बिना इसे केवल दस्तावेज़ीकरण उद्देश्यों के लिए सहेजना शामिल है।



इस तरह के एक घटक के लिए एक समाधान का निर्माण करना समय लेने वाला हो सकता है यदि आप सभी को स्वयं बना रहे हैं। इस पोस्ट में, मैं आपको दिखाऊंगा कि केंडो यूआई द्वारा प्रदान किए गए पीडीएफ निर्यात घटक का लाभ उठाकर इसे आसानी से कैसे प्राप्त किया जा सकता है।

हम कुछ डमी सामग्री के साथ एक कोणीय एप्लिकेशन का निर्माण करेंगे और सामग्री को सीधे पीडीएफ में निर्यात करने के लिए एक केंडो यूआई बटन जोड़ेंगे जैसा कि यहां दिखाया गया है:



माणिक से बने खेल

कोणीय सीएलआई स्थापित करें

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



component

यह आपकी मशीन पर वैश्विक स्तर पर एंगुलर सीएलआई को जोड़ देगा।

कोणीय अनुप्रयोग बनाना

अब आप kendo-angular-export-pdf नाम से एक एप्लिकेशन जेनरेट करने के लिए नीचे दिए गए कमांड को चलाकर इस पोस्ट के उद्देश्य के लिए एक नया ऐप बनाने के लिए आगे बढ़ सकते हैं:

./src/app/app.component.html

एक बार इंस्टॉलेशन प्रक्रिया पूरी हो जाने के बाद, डायरेक्टरी को नए बनाए गए प्रोजेक्ट में बदलें जैसा कि नीचे दिखाया गया है और एप्लिकेशन शुरू करें:

component

आपको अपने कंसोल में नीचे दिए गए संदेश में त्रुटि का अनुभव हो सकता है:

./src/app/app.component.css

यह एक ज्ञात है गिटहब पर मुद्दा और यह के वर्तमान संस्करण के बीच संगतता की कमी के कारण है टाइपप्रति आपकी मशीन और rxjs पर। इसे ठीक करने का त्वरित तरीका नोड_मॉड्यूल फ़ोल्डर को हटाना है। अब, package.json फ़ाइल खोलें और निर्भरता ऑब्जेक्ट के भीतर, ^ को हटाकर rxjs को संपादित करें:

npm install -g @angular/cli 

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

यह आपके एप्लिकेशन को संकलित करेगा और विकास सर्वर शुरू करेगा। इस कोणीय अनुप्रयोग का डिफ़ॉल्ट पृष्ठ देखने के लिए, नेविगेट करें http://लोकलहोस्ट:4200 अपने पसंदीदा ब्राउज़र से और आप इसे देखेंगे:

केंडो यूआई से पीडीएफ निर्यात घटक जोड़ें

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

अवास्तविक इंजन डेवलपर कोर्स - c++ सीखें और गेम बनाएं
ng new kendo-angular-export-pdf 

यह PDFExportModule और BrowserAnimationsModule दोनों को app.module.ts फ़ाइल में आयात और जोड़ देगा:

// change directory cd kendo-angular-export-pdf // start the application ng serve 

केंडो पीडीएफ निर्यात घटक का प्रयोग करें

पीडीएफ निर्यात पैकेज को स्थापित करने के बाद, अब आप हमारे कोणीय एप्लिकेशन के भीतर सामग्री को पीडीएफ में निर्यात करने के लिए आगे बढ़ सकते हैं। खुला |_+_| और इसकी सामग्री को इसके साथ बदलें:

ERROR in node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ';' expected. node_modules/rxjs/internal/types.d.ts(81,74): error TS1005: ';' expected. node_modules/rxjs/internal/types.d.ts(81,77): error TS1109: Expression expected. 

यहां, हमने डमी सामग्री को जोड़ा है और इसे |_+_| के साथ लपेटा है। इसके बाद हमने एक बटन जोड़ा और उसमें एक क्लिक इवेंट संलग्न किया। एक बार बटन पर क्लिक करने के बाद, हमने जेनरेट की गई फाइल को सेव करने के लिए saveAs () मेथड को कॉल किया। फ़ाइल सहेजी जाएगी क्योंकि नाम saveAs () विधि के तर्क के रूप में पारित किया गया है।

अंत में, पृष्ठ को कुछ डिफ़ॉल्ट स्टाइल देने के लिए, निम्नलिखित सामग्री को |_+_| . में जोड़ें फ़ाइल:

 'dependencies': { ... 'rxjs': '6.0.0', // remove the `^` 'zone.js': '^0.8.26' }, 

अब एप्लिकेशन की डायरेक्टरी के भीतर टर्मिनल से एनजी सर्व चलाकर एप्लिकेशन को फिर से शुरू करने के लिए आगे बढ़ें। एक बार

एप्लिकेशन बनाया और परोसा जाता है http://लोकलहोस्ट:4200 आप इसे देखेंगे:

यहां प्रदर्शित सामग्री हमारे कोणीय अनुप्रयोग से है। HTML सामग्री निर्यात कार्यक्षमता का परीक्षण करने के लिए, पीडीएफ के रूप में निर्यात पाठ के साथ केंडो बटन पर क्लिक करें। अब डाउनलोड की गई पीडीएफ फाइल को खोलें:

बिल्कुल सटीक? यह बिना किसी परेशानी के पीडीएफ में निर्यात किए गए हमारे पेज की सामग्री है। लेकिन पीडीएफ फाइल को करीब से देखने पर आप मेरी बात से सहमत होंगे कि कुछ सही नहीं है। सामग्री ठीक से व्यवस्थित नहीं दिखती है। हम अगले भाग में थोड़ा सा मार्जिन जोड़कर इसे बदल देंगे।

पेपर साइज और मार्जिन जोड़ें

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

आइए ./src/app/app.component.html की सामग्री को इसके साथ बदलें:

ng add @progress/kendo-angular-pdf-export 

हमने इसमें दो डेटा विशेषताएँ जोड़ी हैं, जो हैं:

फ्लोट करने के लिए जावास्क्रिप्ट स्ट्रिंग
  • पेपरसाइज़: हमने इसे A4 पर सेट किया है।
  • मार्जिन: हम इसे 2cm पर सेट करते हैं।

पृष्ठ को दोबारा जांचें और पीडीएफ के रूप में निर्यात करें बटन पर क्लिक करें। अब अपनी डाउनलोड की गई पीडीएफ फाइल को खोलने के लिए आगे बढ़ें और आप देखेंगे कि यह नीचे दिखाए गए अनुसार बेहतर दिखता है:

निष्कर्ष

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

हमने यहां सतह को मुश्किल से खरोंच दिया है, क्योंकि पीडीएफ में एचटीएमएल सामग्री निर्यात करते समय केंडो यूआई टीम द्वारा प्रदान की जाने वाली बहुत अधिक कार्यक्षमता है। की जाँच करके एपीआई को बेझिझक एक्सप्लोर करें अधिक जानकारी के लिए यहां लिंक करें .

उम्मीद है आपको इस पोस्ट से बहुत कुछ सीखने को मिला होगा। स्रोत कोड की जाँच करें यहाँ GitHub पर .

पढ़ने के लिए धन्यवाद

अगर आपको यह पोस्ट पसंद आया है, तो इसे अपने सभी प्रोग्रामिंग मित्रों के साथ साझा करें!

हमारा अनुसरण इस पर कीजिये फेसबुक | ट्विटर

कोणीय के बारे में आगे पढ़ना

मैं कोणीय 8 (पूर्व में कोणीय 2) - पूर्ण मार्गदर्शिका

मैं कोणीय और NodeJS - मीन स्टैक गाइड

मैं पूरा Node.js डेवलपर कोर्स (तीसरा संस्करण)

मैं वेब डेवलपर बूटकैंप

मैं 2019 में फ्रंटएंड डेवलपर्स के लिए सर्वश्रेष्ठ 50 कोणीय साक्षात्कार प्रश्न

परियोजना के लिए निर्भरता का समाधान नहीं कर सका

कोणीय 8.0 के साथ सीआरयूडी वेब ऐप कैसे बनाएं

प्रतिक्रिया बनाम कोणीय: एक गहन तुलना

मैं उदाहरण के द्वारा प्रतिक्रिया बनाम कोणीय बनाम Vue.js

Microfrontends — JavaScript चौखटे को एक साथ जोड़ना (प्रतिक्रिया, कोणीय, Vue आदि)

आयनिक 4, कोणीय 8 का उपयोग करके सीआरयूडी मोबाइल ऐप का निर्माण

एंगुलर, आयोनिक 4 और स्प्रिंग बूट के साथ मोबाइल ऐप कैसे बनाएं

शुरुआती के लिए आयनिक 4 और कोणीय ट्यूटोरियल - क्रैश कोर्स

#angular #html #वेब-विकास

www.telerik.com

केंडो यूआई के साथ पीडीएफ में कोणीय पृष्ठ सामग्री को कैसे निर्यात करें

इस ट्यूटोरियल में, अपने एंगुलर एप्लिकेशन के भीतर HTML सामग्री वाले पृष्ठों को आसानी से निर्यात करना सीखें। यह एक जटिल कार्य होना चाहिए, लेकिन Kendo UI घटक के लिए धन्यवाद यह आसान है