रिएक्ट-पीडीएफ का उपयोग करके अपने रिएक्ट घटकों के साथ पीडीएफ दस्तावेज़ कैसे बनाएं

रिएक्ट यूजर इंटरफेस बनाने के लिए एक लोकप्रिय जावास्क्रिप्ट लाइब्रेरी है। प्रतिक्रिया-पीडीएफ लाइब्रेरी का उपयोग करके रिएक्ट घटकों से पीडीएफ फाइलें बनाना संभव है।

यहां आप सीखेंगे कि रिएक्ट-पीडीएफ का उपयोग करके रिएक्ट घटकों के साथ पीडीएफ दस्तावेज कैसे बनाएं।

रिएक्ट-पीडीएफ क्या है?

रिएक्ट-पीडीएफ एक पुस्तकालय है जो आपको बनाने की अनुमति देता है पीडीएफ दस्तावेज प्रतिक्रिया घटकों से। यह घटकों का एक सेट प्रदान करता है जिसका उपयोग आप अपने पीडीएफ दस्तावेज़ बनाने के लिए कर सकते हैं और घटकों को पीडीएफ में प्रस्तुत करने के लिए वर्चुअल डोम का उपयोग करता है।

रिएक्ट-पीडीएफ स्थापित करना

नोड पैकेज प्रबंधक का उपयोग करके प्रतिक्रिया-पीडीएफ स्थापित करने के लिए, अपनी परियोजना की निर्देशिका में निम्नलिखित टर्मिनल कमांड चलाएँ:

एनपीएम इंस्टॉल @ रिएक्ट-पीडीएफ/रेंडरर - सेव करें

इसके बजाय यार्न पैकेज मैनेजर के साथ इसे स्थापित करने के लिए, यह कमांड चलाएँ:

यार्न @ प्रतिक्रिया-पीडीएफ/रेंडरर जोड़ें

एक पीडीएफ दस्तावेज़ बनाना

पीडीएफ दस्तावेज़ बनाने के लिए, आप प्रतिक्रिया-पीडीएफ के दस्तावेज़, पेज और टेक्स्ट घटकों का उपयोग करेंगे।

दस्तावेज़ घटक एक नया पीडीएफ दस्तावेज़ बनाने और इसकी सामग्री प्रस्तुत करने के लिए ज़िम्मेदार है। पृष्ठ घटक पीडीएफ दस्तावेज़ के भीतर एक नया पृष्ठ बनाता है और इसकी सामग्री प्रस्तुत करता है। अंततः मूलपाठ घटक पीडीएफ दस्तावेज़ के भीतर ग्रंथों को प्रस्तुत करता है।

इन तीनों घटकों का उपयोग करके आप एक पीडीएफ दस्तावेज़ कैसे बना सकते हैं, इसका एक उदाहरण यहां दिया गया है:

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात {दस्तावेज़, पाठ, पृष्ठ} से'@react-pdf/रेंडरर';
कॉन्स्ट मेरा दस्तावेज़ = () => (


हैलो</Text>
 </Page>
 </Document>
);
निर्यातगलती करना मेरे कागज़ात;

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

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

आयात करें पीडीएफ व्यूअर घटक और उसमें अपना दस्तावेज़ लपेटें:

आयात प्रतिक्रिया से"प्रतिक्रिया"
आयात {पीडीएफ व्यूअर} से'@react-pdf/रेंडरर';
आयात मेरे कागज़ात से"।/मेरे कागज़ात";
समारोहअनुप्रयोग() {
वापस करना (


 </PDFViewer>
 )
}
निर्यातगलती करना अनुप्रयोग

आपके आवेदन को प्रस्तुत करने पर, यह कुछ ऐसा दिखाई देगा:

पीडीएफ दस्तावेज़ में शैलियाँ जोड़ना

अपने पीडीएफ दस्तावेज़ में शैलियों को जोड़ने के लिए, आप प्रतिक्रिया-पीडीएफ का उपयोग कर सकते हैं शैली पत्रक अवयव। शैली पत्रक घटक आपको अपने पीडीएफ दस्तावेज़ के लिए कस्टम शैलियों को परिभाषित करने की अनुमति देता है।

उपयोग करने के लिए शैली पत्रक घटक, इसे प्रतिक्रिया-पीडीएफ पुस्तकालय से आयात करें और पीडीएफ दस्तावेज़ के लिए अपनी शैलियों को परिभाषित करें।

उदाहरण के लिए:

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात {दस्तावेज़, टेक्स्ट, पेज, स्टाइलशीट} से'@react-pdf/रेंडरर';
कॉन्स्ट शैलियाँ = StyleSheet.create ({
 पृष्ठ: {
 पाठ संरेखित: 'केंद्र',
 मार्जिन टॉप: 30,
 फ़ॉन्ट आकार: 30,
 },
 मूलपाठ: {
 रंग: '#228ख22',
 }
});
कॉन्स्ट मेरा दस्तावेज़ = () => (


हैलो</Text>
 </Page>
 </Document>
);
निर्यातगलती करना मेरे कागज़ात;

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

का उपयोग शैली प्रोप, आप पास करते हैं पृष्ठ और मूलपाठ आपके लिए स्टाइल पृष्ठ और मूलपाठ अवयव। यह सुनिश्चित करता है कि आपकी शैलियाँ इन पर लागू होती हैं पृष्ठ और मूलपाठ अवयव।

पीडीएफ दस्तावेज़ में लेआउट जोड़ना

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

देखना घटक HTML की तरह कार्य करता है डिव—एक मौलिक HTML तत्व. इसके साथ, आप अन्य घटकों को लपेटते हैं, जैसे कि मूलपाठ घटक, और शैलियों को जोड़कर अपने लेआउट को परिभाषित करें देखना अवयव।

जैसे इतना:

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात {दस्तावेज़, टेक्स्ट, पेज, स्टाइलशीट, व्यू} से'@react-pdf/रेंडरर';
कॉन्स्ट शैलियाँ = StyleSheet.create ({
 पृष्ठ: {
 मार्जिन टॉप: 30,
 फ़ॉन्ट आकार: 30,
 गद्दी: 20,
 },
 विन्यास: {
 मार्जिन टॉप: 30,
 फ्लेक्स डायरेक्शन: 'पंक्ति',
 औचित्य सामग्री: 'अंतरिक्ष के बीच'
 }
});
कॉन्स्ट मेरा दस्तावेज़ = () => (




हैलो</Text>
 </View>

आपका स्वागत है!!!</Text>
 </View>
 </View>
 </Page>
 </Document>
);
निर्यातगलती करना मेरे कागज़ात;

इस उदाहरण में, आप का उपयोग करें देखना अन्य घटकों को समूहित करने के लिए घटक।

पीडीएफ दस्तावेज़ में छवियां जोड़ना

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

छवि घटक एक लेता है स्रोत प्रोप जो छवि के यूआरएल को निर्दिष्ट करता है और ए शैली अपनी छवियों में कस्टम शैलियों को जोड़ने के लिए सहारा।

उदाहरण के लिए:

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात {दस्तावेज़, पृष्ठ, स्टाइलशीट, दृश्य, छवि} से'@react-pdf/रेंडरर';
कॉन्स्ट शैलियाँ = StyleSheet.create ({
 पृष्ठ: {
 गद्दी: 20,
 संरेखित आइटम: 'केंद्र',
 },
 छवि: {
 चौड़ाई: 300,
 ऊंचाई: 200,
 }
});
कॉन्स्ट मेरा दस्तावेज़ = () => (



 स्रोत =' https://example.com/image.png'
 शैली={styles.image} />
 </View>
 </Page>
 </Document>
);
निर्यातगलती करना मेरे कागज़ात;

इस उदाहरण में, आप एक पीडीएफ दस्तावेज़ बना रहे हैं जिसमें एक पृष्ठ है जिसमें एक छवि है। छवि घटक 300 पिक्सेल की चौड़ाई वाली शैली और 200 पिक्सेल की ऊँचाई शैली वाली एक छवि प्रदर्शित करता है।

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

लिंक घटक एक लेता है स्रोत लिंक पर क्लिक करने पर उपयोगकर्ताओं को पुनर्निर्देशित करने के लिए सहारा। उन्हें घटक में निर्दिष्ट URL पर पुनर्निर्देशित किया जाएगा स्रोत प्रोप यदि आप एक को परिभाषित करते हैं।

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

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात {दस्तावेज़, पेज, स्टाइलशीट, व्यू, लिंक} से'@react-pdf/रेंडरर';
कॉन्स्ट शैलियाँ = StyleSheet.create ({
 पृष्ठ: {
 गद्दी: 20,
 संरेखित आइटम: 'केंद्र',
 },
 जोड़ना: {
 रंग: '#333333',
 पाठसजावट: 'कोई नहीं'
 }
});
कॉन्स्ट मेरा दस्तावेज़ = () => (



' https://example.com' शैली={styles.link}>मुझे क्लिक करें</Link>
 </View>
 </Page>
 </Document>
);
निर्यातगलती करना मेरे कागज़ात;

उपरोक्त उदाहरण एक पृष्ठ और एक दृश्य के साथ एक PDF दस्तावेज़ बनाता है। दृश्य के भीतर, आप एक लिंक घटक प्रदर्शित कर रहे हैं, जिसे क्लिक करने पर, उपयोगकर्ता निर्दिष्ट URL पर रीडायरेक्ट करता है, " https://example.com.”

अब आप रिएक्ट का उपयोग करके पीडीएफ दस्तावेज़ बना सकते हैं

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

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