नोडजेएस और फॉक्सिट पीडीएफ एसडीके का उपयोग करके पीडीएफ इनवॉइसिंग वेब एप्लिकेशन कैसे बनाएं

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

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

सौभाग्य से, फॉक्सिट का पीडीएफ पुस्तकालय पीडीएफ फाइलें बनाने के लिए एक त्वरित और सुरक्षित समाधान प्रदान करता है। उनका उपयोग करके HTML से पीडीएफ कनवर्टर , आप इनवॉइस सहित किसी भी HTML दस्तावेज़ को एक पीडीएफ फ़ाइल में परिवर्तित कर सकते हैं जिसे ईमेल से जोड़ा जा सकता है या ग्राहकों को आपके वेब एप्लिकेशन से डाउनलोड करने के लिए उपलब्ध कराया जा सकता है।

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

पीडीएफ चालान बनाने और भेजने के लिए एक वेब एप्लिकेशन का निर्माण

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

इस परियोजना के लिए, हम इसका उपयोग करेंगे अभिव्यक्त करना वेब ढांचा, शुद्ध सीएसएस स्टाइलिंग के लिए, और नोडमेलर ईमेल कार्यक्षमता के लिए.

पूर्वापेक्षाएँ:

• नोड.जे.एस संस्करण 8+ और NPM संस्करण 5+
• फॉक्सिट एसडीके (आप कर सकते हैं निःशुल्क परीक्षण डाउनलोड करें उनकी वेबसाइट से संस्करण)
• फॉक्सिट HTML से पीडीएफ रूपांतरण ऐड-ऑन
• मेलट्रैप (वैकल्पिक, एसएमटीपी ईमेल ट्रांसपोर्ट के परीक्षण के लिए)

एक नया एक्सप्रेस ऐप बनाना

एक नया बॉयलरप्लेट एक्सप्रेस वेब एप्लिकेशन बनाने के लिए, आपको ऐप जनरेटर का उपयोग करना होगा:

 npx express-generator --git --view=hbs

यह एक .gitignore फ़ाइल के साथ एक वेब ऐप बनाएगा हैंडल टेम्पलेट फ़ाइलें.

इसके बाद, आपको नोडमेलर एनपीएम पैकेज जोड़ने और एक्सप्रेस की निर्भरता स्थापित करने की आवश्यकता है:

 npm i nodemailer && npm i

एक्सप्रेस द्वारा उत्पन्न डिफ़ॉल्ट एप्लिकेशन आपको दो रूट फ़ाइलें प्रदान करता है: /routes/index.js और /routes/users.js । users.js रूट को हटाएं और invoices.js नामक एक नई रूट फ़ाइल बनाएं। इस नए रूट को अपनी app.js फ़ाइल में जोड़ें और usersRoute हटा दें:

 ... var indexRouter = require('./routes/index'); var invoicesRouter = require('./routes/invoices'); var app = express(); ... app.use('/', indexRouter); app.use('/invoices', invoicesRouter); ...

इस एप्लिकेशन में अधिकांश कार्य इनवॉइस राउटर के भीतर है।

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

/data/invoices.json पर एक नई फ़ाइल बनाएं और नीचे जोड़ें:

 [ { "id": "47427759-9362-4f8e-bfe4-2d3733534e83", "customer": "Bins and Sons", "contact_name": "Verne McKim", "contact_email": "[email protected]", "address": "3 Burning Wood Street", "city_state": "Memphis, TN 38118", "plan_id": "41595-5514", "plan_name": "Starter", "subtotal": 499.99, "fee": 50.00, "total": 549.99 }, { "id": "1afdd2fa-6353-437c-a923-e43baac506f4", customer": "Koepp Group", "contact_name": "Junia Pretious", "contact_email": "[email protected]", "address": "7170 Fairfield Hill", "city_state": "Los Angeles, CA 90026", "plan_id": "43419-355", "plan_name": "Professional", "amount": 999.99, "fee": 50.00, "total": 1049.99 }, { "id": "59c216f8-7471-4ec2-a527-ab3641dc49aa", "customer": "Lynch-Bednar", "contact_name": "Evelin Stollenberg", "contact_email": "[email protected]", "address": "9951 Erie Place", "city_state": "Chicago, IL 60605", "plan_id": "63323-714", "plan_name": "Starter", "amount": 499.99, "fee": 50.00, "total": 549.99 } ]

ऊपर आप जो तीन चालान देख सकते हैं उनमें ग्राहक, योजना और बिलिंग डेटा शामिल है जो आपको अगले भाग में चालान बनाने में मदद करेगा।

चालान मार्ग बनाना

routes/invoices.js फ़ाइल आपके एप्लिकेशन के भीतर तीन नए रूट बनाएगी:

• /invoices - उपरोक्त फ्लैट डेटा फ़ाइल से सभी चालानों की एक सूची।
• /invoices/:id - एक चालान पूर्वावलोकन ताकि उपयोगकर्ता ग्राहक को भेजने से पहले देख सकें कि चालान कैसा दिखेगा।
• /invoices/:id/email - एक समापन बिंदु जो फ़ाइल में मौजूद संपर्क ईमेल पर पीडीएफ चालान उत्पन्न करता है और भेजता है।

invoices.js फ़ाइल खोलें और पहले दो मार्गों को परिभाषित करने के लिए निम्नलिखित कोड स्निपेट जोड़ें:

 const express = require('express'); const router = express.Router(); const invoices = require('../data/invoices.json'); // Import exec to run the Foxit HTML to PDF executable const { exec } = require('child_process'); // Import nodemailer to send emails const nodemailer = require('nodemailer'); router.get('/', function(req, res) { res.render('invoice-list', { invoices: invoices, // Accepts errors and successes as query string arguments success: req.query['success'], error: req.query['error'], }); }); router.get('/:id', function(req, res) { const invoice = invoices.find(invoice => invoice.id === req.params['id']); // If the invoice doesn't exist, redirect the user back to the list page if (!invoice) { res.redirect('/invoices'); } // Make the date format pretty const date = new Date().toLocaleDateString("en", { year:"numeric", day:"2-digit", month:"2-digit", }); res.render('invoice-single', { invoice, date }); }); router.get('/:id/email', function(req, res) { // Coming soon. }); module.exports = router;

आपका एप्लिकेशन परीक्षण के लिए लगभग तैयार है, लेकिन आपको पहले दो दृश्य फ़ाइलें बनानी होंगी।

दृश्य और शैलियाँ जोड़ना

एक्सप्रेस तर्क और प्रस्तुति को routes/ और views/ में अलग करता है। अब views/ निर्देशिका में दो नई फ़ाइलें जोड़ें: invoice-list.hbs और invoice-single.hbs ।

इसके अलावा, अपनी invoice-list.hbs फ़ाइल में निम्नलिखित जोड़ें:

 <h1><a href="/invoices">Unpaid Invoices</a></h1> {{#if success}} <p class="success"><strong>Success!</strong> The invoice has been sent to the client.</p> {{/if}} {{#if error}} <p class="error"><strong>Whoops!</strong> Something went wrong and your invoice could not be sent.</p> {{/if}} {{#each invoices}} <h3>{{this.customer}}</h3> <p>ID: {{this.id}} <br/> <a href="/invoices/{{this.id}}">View</a> | <a href="/invoices/{{this.id}}/email">Email Reminder</a> </p> {{/each}}

इनवॉइस invoice-single.hbs फ़ाइल खोलें और इसे जोड़ें:

 <div class="pure-g"> <div class="pure-u-1-2"> <h1>Invoice</h1> </div> <div class="pure-u-1-2" style="text-align: right;"> <p class="muted">Issued on {{ date }}</p> </div> </div> <div class="pure-g"> <div class="pure-u-1-2"> <h3>Provider</h3> <p> <strong>Tiller, Inc.</strong><br/> 1255 S. Clark<br/> Chicago, IL 60608 </p> </div> <div class="pure-u-1-2" style="text-align: right;"> <h3>Billed to</h3> <p> <strong>{{invoice.customer}}</strong><br/> {{invoice.contact_name}}<br/> {{invoice.address}}<br/> {{invoice.city_state}} </p> </div> </div> <table class="pure-table pure-table-horizontal"> <thead> <tr> <th>ID</th> <th>Plan Name</th> <th class="text-right">Amount</th> </tr> </thead> <tbody> <tr> <td>{{invoice.plan_id}}</td> <td>{{invoice.plan_name}}</td> <td class="text-right">${{invoice.subtotal}}</td> </tr> <tr> <td></td> <td class="text-right">Subtotal:</td> <td class="text-right">${{invoice.subtotal}}</td> </tr> <tr> <td></td> <td class="text-right">Taxes and Fees:</td> <td class="text-right">${{invoice.fee}}</td> </tr> <tr class="bold"> <td></td> <td class="text-right">Total:</td> <td class="text-right">${{invoice.total}}</td> </tr> </tbody> </table> <div class="footer"> <p>Please make checks payable to <strong>Tiller, Inc</strong>. Invoices are due 30 days after date issued.</p> <p>Thank you for your business!</p> </div>

अपने एप्लिकेशन की स्टाइलशीट में शैलियाँ जोड़ने और शामिल करने के लिए शुद्ध सीएसएस मॉड्यूल दृश्य रूप से आकर्षक लुक के लिए, कृपया views/layout.hbs फ़ाइल खोलें और इसकी सामग्री को निम्नलिखित कोड स्निपेट से बदलें। यह प्योर को आयात करेगा और एकल कॉलम ग्रिड लेआउट बनाएगा:

 <!DOCTYPE html> <html> <head> <title>{{title}}</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css" integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" crossorigin="anonymous"> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <div class="container"> <div class="pure-g"> <div class="pure-u-1"> {{{body}}} </div> </div> </div> </body> </html>

अपने एप्लिकेशन की public/style.css file खोलें और निम्नलिखित CSS कोड स्निपेट जोड़ें:

 body { background-color: #f7f7f7; color: #333333; } a { color: #156d6a; } h1 a, h2 a, h3 a { text-decoration: none; } table { width: 100%; } .container { background-color: #ffffff; max-width: 700px; margin: 0 auto; padding: 30px; } .muted { color: #999999; } .bold { font-weight: bold; } .text-right { text-align: right; } .footer p { margin-top: 30px; } .success { background-color: #c0f5f3; color: #0d928d; padding: 10px; } .error { background-color: #f5c0c0; color: #792525; padding: 10px; }

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

अब, आप अपने एप्लिकेशन का परीक्षण करने के लिए तैयार हैं। कृपया अपने कमांड लाइन इंटरफ़ेस में run npm और अपने वेब ब्राउज़र को localhost:3000/invoices पर खोलें। आपको निम्नलिखित के समान चालानों की एक सूची प्रस्तुत की जाएगी:

प्रत्येक चालान का पूर्वावलोकन करने के लिए "देखें" पर क्लिक करें।

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

फॉक्सिट के साथ पीडीएफ तैयार करना

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

नोड की child_process लाइब्रेरी में exec() नामक एक फ़ंक्शन शामिल है जो आपको कमांड-लाइन फ़ंक्शन निष्पादित करने में सक्षम बनाता है। यह विधि फ़ॉक्सिट से C++ निष्पादनयोग्य चलाने के लिए उपयोगी है। HTML को पीडीएफ निष्पादन योग्य में निष्पादित करने के लिए, कृपया निम्नलिखित कोड के साथ अपना /:id/email रूट अपडेट करें:

 ... router.get('/:id/email', function(req, res) { // Set the executable path and output folder const htmlToPdfPath = '/path/to/foxit/html2pdf'; const outputFolder = __dirname + '/../invoices/'; // Get the invoice const invoice = invoices.find(invoice => invoice.id === req.params['id']); if (!invoice) { res.redirect('/invoices?error=1'); } // Convert the HTML to PDF exec( `${htmlToPdfPath} -html /invoices/${req.params['id']} -o ${outputFolder}${req.params['id']}.pdf`, (err, stdout, stderr) => { if (err || stderr) { console.error(err, stderr); res.redirect('/invoices?error=1'); } else { // For now: log the output file path console.log(`PDF generated and saved to ${outputFolder}${req.params['id']}.pdf`); res.redirect('/invoices?success=1'); } }); });

इस कोड को चलाने से पहले, कृपया सुनिश्चित करें कि आप अपने htmltopdf निष्पादन योग्य के लिए सही पथ को प्रतिबिंबित करने के लिए htmlToPdfPath वेरिएबल को अपडेट करें।

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

अब जब आपके पास पीडीएफ चालान तैयार करने की क्षमता है, तो अंतिम चरण इन चालानों को अपने ग्राहकों को भेजना है।

नोडमेलर के साथ ईमेल भेजना

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

नोडमेलर का परीक्षण करने के लिए, आप इसका उपयोग कर सकते हैं स्ट्रीम ट्रांसपोर्ट का JSON विकल्प , जो आपको संदेश को अपने कंसोल पर लॉग करने की अनुमति देता है। अपना संदेश सेट करने और उसे Nodemailer का उपयोग करके भेजने के लिए, अपने /invoices/:id/email रूट में "पीडीएफ जेनरेट और सेव किया गया..." console.log स्टेटमेंट के ठीक नीचे निम्नलिखित कोड स्निपेट जोड़ें:

 ... // Construct the message const message = { from: '[email protected]', to: invoice.contact_email, subject: 'Reminder: Your Invoice from Tiller, Inc. is Due', html: `<p>Hey ${invoice.contact_name},</p><p>I just wanted to remind you that your invoice for last month's services is now due. I've attached it here for your convenience.</p><p>Thanks for your business!</p>`, attachments: [ { filename: 'invoice.pdf', path: `${outputFolder}${req.params['id']}.pdf`, } ] }; // Use mailer to send invoice nodemailer .createTransport({jsonTransport: true}) .sendMail(message, function (err, info) { if (err) { res.redirect('/invoices?error=1'); } else { console.log(info.message); res.redirect('/invoices?success=1'); } }); ...

कृपया अपने नोड एप्लिकेशन को ताज़ा करें और किसी भी चालान के लिए "ईमेल अनुस्मारक" पर क्लिक करें। इस बार, आप अपने कंसोल में JSON के रूप में प्रदर्शित संपूर्ण ईमेल डेटा ऑब्जेक्ट देखेंगे।

 { "from": { "address": "[email protected]", "name": "" }, "to": [ { "address": "[email protected]", "name": "" } ], "subject": "Reminder: Your Invoice from Tiller, Inc. is Due", "html": "<p>Hey Junia Pretious,</p><p>I just wanted to remind you that your invoice for last month's services is now due. I've attached it here for your convenience.</p><p>Thanks for your business!</p>", "attachments": [ { "content": "JVBERi0xLjMKJcTl8uXrp...", "filename": "invoice.pdf", "contentType": "application/pdf", "encoding": "base64" } ], "headers": {}, "messageId": "<[email protected]>" }

attachments.content स्ट्रिंग एन्कोडेड पीडीएफ फ़ाइल का प्रतिनिधित्व करती है। संक्षिप्तता के लिए, मैंने इसे उपरोक्त उदाहरण में छोटा कर दिया है।

वास्तविक का उपयोग करके ईमेल का परीक्षण करना एसएमटीपी सर्वर , आप उपयोग कर सकते हैं मेलट्रैप . यह मानते हुए कि आपके पास मेलट्रैप में एक खाता है, createTransport({jsonTransport: true}) कॉल को निम्नलिखित कोड स्निपेट से बदलें:

 createTransport({ host: "smtp.mailtrap.io", port: 2525, auth: { user: "<YOUR_MAILTRAP_USERID>", pass: "<YOUR_MAILTRAP_PASS>" } })

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

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

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