React और Node.js का उपयोग करके गतिशील PDF बनाएँ

सामग्री, जिसका अनुवाद आज हम प्रकाशित करते हैं, HTML-कोड का उपयोग करके टेम्पलेट के रूप में गतिशील पीडीएफ-फाइलों के निर्माण के लिए समर्पित है। अर्थात्, हम कुछ वस्तुओं या सेवाओं के भुगतान के लिए एक सरल इनवॉइस बनाने के बारे में बात करेंगे, जिसमें शामिल डायनामिक डेटा प्रतिक्रिया स्थिति के राज्य से लिया गया है। रिएक्ट एप्लिकेशन का आधार create-react-app का उपयोग करके बनाया गया था, प्रोजेक्ट का सर्वर हिस्सा Node.js पर आधारित है, और इसके विकास में एक्सप्रेस फ्रेमवर्क का उपयोग किया गया था।



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

परियोजना निर्माण

एक परियोजना निर्देशिका बनाएं और उस पर जाएं:

mkdir pdfGenerator && cd pdfGenerator 

एक नया रिएक्ट एप्लिकेशन बनाएं:

 create-react-app client 

एप्लिकेशन निर्माण पूरा करने के बाद, आपके द्वारा बनाई गई निर्देशिका पर जाएं और निर्भरताएं स्थापित करें:

 cd client && npm i -S axios file-saver 

एक एक्सप्रेस सर्वर बनाएँ। ऐसा करने के लिए, प्रोजेक्ट डायरेक्टरी में server फ़ोल्डर बनाएँ और उस पर जाएँ। इसमें, index.js फ़ाइल बनाएँ और प्रोजेक्ट इनिशियलाइज़ेशन शुरू करें:

 mkdir server && cd server && touch index.js && npm init 

यहाँ, package.json , बस कई बार Enter दबाएँ। उसके बाद, प्रोजेक्ट के सर्वर भाग के लिए आवश्यक निर्भरताएँ जोड़ने के लिए निम्न कमांड निष्पादित करें:

 npm i -S express body-parser cors html-pdf 

अब, client/package.json फ़ाइल में, निर्भरता विवरण अनुभाग के ऊपर, निम्नलिखित जोड़ें:

 "proxy": "http://localhost:5000/" 

यह क्लाइंट कोड से स्थानीय सर्वर के साथ काम करने में मदद करेगा।

अब आपको टर्मिनल की दो विंडो खोलने की आवश्यकता है।

पहली विंडो में, client निर्देशिका पर जाएं और निम्नलिखित कमांड निष्पादित करें:

 npm start 

दूसरी विंडो में, server फ़ोल्डर पर जाएं और निम्नलिखित कमांड निष्पादित करें:

 nodemon index.js 

प्रारंभिक ग्राहक सेटअप

हमारी परियोजना का ग्राहक हिस्सा बहुत सरल लगेगा।

शुरू करने के लिए, आवेदन src/App.js ग्राहक भाग के src/App.js , हम कोड में निर्भरता को आयात करते हैं:

 import axios from 'axios'; import { saveAs } from 'file-saver'; 

उसके बाद, घटक विवरण के शीर्ष पर, राज्य को इनिशियलाइज़ करें:

 state = {   name: 'Adrian',   receiptId: 0,   price1: 0,   price2: 0, } 

आइए, एप्लिकेशन create-react-app का उपयोग करके एप्लिकेशन टेम्प्लेट में बनाए गए मानक JSX मार्कअप को हटाएं और render() विधि से लौटाएं। इसमें निम्नलिखित डालें:

 <div className="App">   <input type="text" placeholder="Name" name="name" onChange {this.handleChange}/>   <input type="number" placeholder="Receipt ID" name="receiptId"  onChange={this.handleChange}/>   <input type="number" placeholder="Price 1" name="price1" onChange={this.handleChange}/>   <input type="number" placeholder="Price 2" name="price2" onChange={this.handleChange}/>   <button onClick={this.createAndDownloadPdf}>Download PDF</button></div> 

चलिए handleChange विधि बनाते हैं, जो इनपुट फील्ड से संबंधित एप्लिकेशन स्टेट डेटा को अपडेट करने के लिए जिम्मेदार होगा:

 handleChange = ({ target: { value, name }}) => this.setState({ [name]: value }) 

अब हम एक पीडीएफ फाइल बनाने के कार्य को आगे बढ़ा सकते हैं। इसका वह हिस्सा, जो क्लाइंट के माध्यम से हल किया जाता है, सर्वर पर एक POST अनुरोध बनाना है। अनुरोध अनुप्रयोग स्थिति भेजता है:

 createAndDownloadPdf = () => {   axios.post('/create-pdf', this.state) } 

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

प्रारंभिक सर्वर सेटअप

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

सबसे पहले, index.js फ़ाइल में निर्भरताएँ आयात करें:

 const express = require('express'); const bodyParser = require('body-parser'); const pdf = require('html-pdf'); const cors = require('cors'); 

हम एक्सप्रेस एप्लिकेशन को इनिशियलाइज़ करते हैं और पोर्ट को कॉन्फ़िगर करते हैं:

 const app = express(); const port = process.env.PORT || 5000; 

क्वेरी पार्सर सेट करें। हमें जो चाहिए वह req.body रूप में उपलब्ध होगा। हम CORS को भी कॉन्फ़िगर करेंगे ताकि हमारी Cross-Origin Request Blocked त्रुटि हमारे काम में हस्तक्षेप न करे:

 app.use(cors()); app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); 

उसके बाद, सर्वर शुरू करें:

 app.listen(port, () => console.log(`Listening on port ${port}`)); 

अब हम पीडीएफ बनाने के लिए जिम्मेदार कोड से निपट सकते हैं।

PDF के लिए HTML टेम्पलेट बनाएं

पीडीएफ फाइलों को बनाते समय हमें एक HTML टेम्पलेट का उपयोग करना पड़ता है। इस तरह का खाका बनाने में, अनंत संभावनाएं हमारे सामने खुल जाती हैं। शुद्ध एचटीएमएल और सीएसएस का उपयोग करके बनाई जा सकने वाली हर चीज को पीडीएफ फाइल के रूप में दर्शाया जा सकता है। server फ़ोल्डर में documents निर्देशिका बनाएं, उस पर जाएं और इसमें index.js फ़ाइल बनाएं:

 mkdir documents && cd documents && touch index.js 

इस फ़ाइल से, हम एक तीर फ़ंक्शन को निर्यात करते हैं जो सभी आवश्यक HTML कोड वापस कर देगा। इस फ़ंक्शन को कॉल करते समय, आप मापदंडों का उपयोग कर सकते हैं, जिसका वर्णन हम यहां भी करेंगे।

 module.exports = ({ name, price1, price2, receiptId }) => { ... } 

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

server/documents फोल्डर से index.js कोड को निम्न फॉर्म में index.js :

 module.exports = ({ name, price1, price2, receiptId }) => {    const today = new Date(); return `    <!doctype html>    <html>       <head>          <meta charset="utf-8">          <title>PDF Result Template</title>          <style>             .invoice-box {             max-width: 800px;             margin: auto;             padding: 30px;             border: 1px solid #eee;             box-shadow: 0 0 10px rgba(0, 0, 0, .15);             font-size: 16px;             line-height: 24px;             font-family: 'Helvetica Neue', 'Helvetica',             color: #555;             }             .margin-top {             margin-top: 50px;             }             .justify-center {             text-align: center;             }             .invoice-box table {             width: 100%;             line-height: inherit;             text-align: left;             }             .invoice-box table td {             padding: 5px;             vertical-align: top;             }             .invoice-box table tr td:nth-child(2) {             text-align: right;             }             .invoice-box table tr.top table td {             padding-bottom: 20px;             }             .invoice-box table tr.top table td.title {             font-size: 45px;             line-height: 45px;             color: #333;             }             .invoice-box table tr.information table td {             padding-bottom: 40px;             }             .invoice-box table tr.heading td {             background: #eee;             border-bottom: 1px solid #ddd;             font-weight: bold;             }             .invoice-box table tr.details td {             padding-bottom: 20px;             }             .invoice-box table tr.item td {             border-bottom: 1px solid #eee;             }             .invoice-box table tr.item.last td {             border-bottom: none;             }             .invoice-box table tr.total td:nth-child(2) {             border-top: 2px solid #eee;             font-weight: bold;             }             @media only screen and (max-width: 600px) {             .invoice-box table tr.top table td {             width: 100%;             display: block;             text-align: center;             }             .invoice-box table tr.information table td {             width: 100%;             display: block;             text-align: center;             }             }          </style>       </head>       <body>          <div class="invoice-box">             <table cellpadding="0" cellspacing="0">                <tr class="top">                   <td colspan="2">                      <table>                         <tr>                            <td class="title"><img src="https://i2.wp.com/cleverlogos.co/wp-content/uploads/2018/05/reciepthound_1.jpg?fit=800%2C600&ssl=1"                               style="width:100%; max-width:156px;"></td>                            <td>                               Datum: ${`${today.getDate()}. ${today.getMonth() + 1}. ${today.getFullYear()}.`}                            </td>                         </tr>                      </table>                   </td>                </tr>                <tr class="information">                   <td colspan="2">                      <table>                         <tr>                            <td>                               Customer name: ${name}                            </td>                            <td>                               Receipt number: ${receiptId}                            </td>                         </tr>                      </table>                   </td>                </tr>                <tr class="heading">                   <td>Bought items:</td>                   <td>Price</td>                </tr>                <tr class="item">                   <td>First item:</td>                   <td>${price1}$</td>                </tr>                <tr class="item">                   <td>Second item:</td>                   <td>${price2}$</td>                </tr>             </table>             <br />             <h1 class="justify-center">Total price: ${parseInt(price1) + parseInt(price2)}$</h1>          </div>       </body>    </html>    `; }; 

server/index.js इस फाइल को server/index.js :

 const pdfTemplate = require('./documents'); 

PDF बनाएँ

याद रखें कि सर्वर पर हम दो रूट बनाने जा रहे हैं। POST मार्ग क्लाइंट से डेटा प्राप्त करने और एक पीडीएफ फाइल बनाने के लिए जिम्मेदार होगा। जीईटी मार्ग का उपयोग क्लाइंट को तैयार फ़ाइल भेजने के लिए किया जाएगा।

▍ create-pdf मार्ग

pdf.create() html-pdf मॉड्यूल से आयात की गई वस्तु का जिक्र करते हुए, create-pdf POST रूट में, हम pdf.create() कमांड का उपयोग करेंगे।

pdf.create() विधि के पहले पैरामीटर के रूप में, एक HTML टेम्पलेट का उपयोग किया जाता है, साथ ही क्लाइंट से प्राप्त डेटा भी।

pdf.create() को वापस करने के लिए, हम toFile() पद्धति को कॉल करते हैं, इसे वह नाम देते हैं जिसे हम पीडीएफ दस्तावेज़ में असाइन करना चाहते हैं, साथ ही साथ तीर कॉलबैक फ़ंक्शन। यह फ़ंक्शन, त्रुटि के मामले में, res.send(Promise.reject()) कमांड निष्पादित करेगा। इस घटना में कि सब कुछ ठीक हो गया, वह res.send(Promise.resolve()) कमांड res.send(Promise.resolve()) को निष्पादित करेगा।

 app.post('/create-pdf', (req, res) => {    pdf.create(pdfTemplate(req.body), {}).toFile('result.pdf', (err) => {        if(err) {            res.send(Promise.reject());        }        res.send(Promise.resolve());    }); }); 

▍फेट-पीडीएफ रूट

उसी समय, हम एक मार्ग बनाएंगे जिसका उपयोग ग्राहक के अनुरोध पर, पीडीएफ फाइल सफलतापूर्वक बनने के बाद किया जाएगा। यहां हम केवल तैयार दस्तावेज़ लेते हैं और इसे res.sendFile() का उपयोग करके क्लाइंट को भेजते हैं:

 app.get('/fetch-pdf', (req, res) => {    res.sendFile(`${__dirname}/result.pdf`) }) 

क्लाइंट फ़ंक्शन createAndDownloadPdf

अब हम क्लाइंट कोड पर लौट सकते हैं और createAndDownloadPdf फ़ंक्शन पर काम करना जारी रख सकते हैं। यहां हम axios मॉड्यूल का उपयोग करके सर्वर के लिए एक POST अनुरोध करते हैं। अब यह फ़ंक्शन इस तरह दिखता है:

 createAndDownloadPdf = () => {   axios.post('/create-pdf', this.state) } 

यदि सर्वर पर एक POST अनुरोध निष्पादित करने के बाद एक पीडीएफ दस्तावेज़ बनाया गया था, तो हमें एक GET अनुरोध निष्पादित करने की आवश्यकता है, जिसके जवाब में सर्वर ग्राहक को तैयार दस्तावेज़ भेजेगा।

इस व्यवहार योजना को लागू करने के लिए, हम axios.post() कॉल करने के बाद कॉल करते हैं। then() । यह हमें ऐसा करने की अनुमति देता है कि ग्राहक के POST अनुरोध के जवाब में, हम उस सर्वर से एक वादा वापस करते हैं जिसे या तो सफलतापूर्वक हल किया जा सकता है या अस्वीकार किया जा सकता है।

हम निम्नलिखित कोड के साथ फ़ंक्शन को पूरक करते हैं:

 .then(() => axios.get('/fetch-pdf', { responseType: 'blob' })) .then(( res) => {}) 

यहां आप इस तथ्य पर ध्यान दे सकते हैं कि blob उपयोग responseType रूप blob किया जाता है। इससे पहले कि हम आगे बढ़ें, आइए हम इसके बारे में बात करते हैं।

बूँद वस्तुओं

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

प्रोजेक्ट पूरा होना

अब जब हम जानते हैं कि Blob ऑब्जेक्ट्स क्या हैं, तो हम res.data के आधार पर, इसमें res.data नई Blob ऑब्जेक्ट res.data .then .then() कॉल का उपयोग कर सकते हैं। इस ऑब्जेक्ट को बनाते समय, हम इसके निर्माता को एक पैरामीटर पास करेंगे, जो यह दर्शाता है कि ऑब्जेक्ट जो डेटा स्टोर करेगा, वह application/pdf प्रकार का है। उसके बाद, हम saveAs() विधि का उपयोग कर सकते हैं, जो file-saver मॉड्यूल से आयात किया गया था, और डेटा को फ़ाइल में सहेजें। नतीजतन, createAndDowndloadPdf विधि का कोड नीचे दिखाए गए जैसा दिखेगा:

   createAndDownloadPdf = () => {    axios.post('/create-pdf', this.state)      .then(() => axios.get('fetch-pdf', { responseType: 'blob' }))      .then((res) => {        const pdfBlob = new Blob([res.data], { type: 'application/pdf' });        saveAs(pdfBlob, 'newPdf.pdf');      })  } 

यह ब्राउज़र इंटरफ़ेस जैसा दिखता है।


ब्राउज़र में अनुप्रयोग

खेतों में भरने और Download PDF बटन पर क्लिक करने के बाद, डेटा सर्वर पर स्थानांतरित कर दिया जाता है और एक पीडीएफ दस्तावेज़ इससे डाउनलोड किया जाता है।


पीडीएफ डाउनलोड करें

और यहाँ पीडीएफ दस्तावेज़ ही है।


सॉफ्टवेयर उत्पन्न पीडीएफ

परिणाम

हमने एक ऐसा तंत्र देखा, जो आपको पीडीएफ फाइलों को प्रोग्राम करने की अनुमति देता है। यहाँ प्रोजेक्ट कोड के साथ एक GitHub रिपॉजिटरी है। हमें उम्मीद है कि इस सामग्री में आपके द्वारा मिले विचारों को आपके विकास में आवेदन मिलेगा।

प्रिय पाठकों! आप प्रोग्राम को Node.js का उपयोग करके PDF फ़ाइलों को बनाने की समस्या को हल करने के बारे में कैसे जाएंगे?