La génération de factures de paiement est un aspect crucial de toute entreprise, et la facturation numérique est devenue une pratique courante dans divers secteurs. Dans ce contexte, les développeurs d'applications Web sont souvent confrontés à la tâche de générer et d'envoyer par programmation des factures PDF.  Que vous automatisez le processus de génération et de notification des factures ou que vous développiez une interface utilisateur graphique (GUI) pour rappeler de manière proactive aux clients les factures impayées, le défi technique initial consiste à générer des factures PDF. Bien que vous puissiez développer un script personnalisé pour la génération de PDF, ce serait une entreprise importante. Bien que les services Web soient pratiques, ils peuvent ne pas convenir si vous avez des accords de confidentialité avec vos clients, car l'envoi de données à un service tiers sur Internet peut poser des problèmes.  Heureusement, Foxit  fournit une solution rapide et sécurisée pour générer des fichiers PDF. En utilisant leur  , vous pouvez convertir n'importe quel document HTML, y compris les factures, en un fichier PDF qui peut être joint à un e-mail ou mis à la disposition des clients pour téléchargement à partir de votre application Web.   Bibliothèque PDF   Convertisseur HTML en PDF  Ce didacticiel vous guidera tout au long du processus de création d'un  application qui exploite la  pour générer des factures PDF à partir de factures HTML dans une application Web. Une fois généré, vous utiliserez  pour envoyer la facture via SMTP à l'adresse e-mail du client. Vous pouvez suivre les étapes décrites ci-dessous ou  .   Node.js   Kit de développement PDF Foxit   Nodemailer   accéder à la base de code complète sur le référentiel GitHub de Foxit   Construire une application Web pour créer et envoyer des factures PDF  Dans ce didacticiel, nous vous guiderons tout au long du processus de création d'une application Web permettant à votre service de facturation de gérer efficacement les factures impayées. Vous créerez diverses fonctionnalités, dont un outil interne de suivi, une page affichant les factures impayées et une page de prévisualisation pour chaque facture. Les utilisateurs auront la possibilité d'envoyer des rappels par e-mail aux clients avec la facture jointe.  Pour ce projet, nous utiliserons le  cadre web,  pour le style et  pour la fonctionnalité de messagerie.   Exprimer   CSS pur   Nodemailer   Conditions préalables:  version 8+ et  version 5+   Node.js   MNP  Le SDK Foxit (vous pouvez  version de leur site Web)   télécharger un essai gratuit  Le   de Foxit module complémentaire de conversion HTML vers PDF  (facultatif, pour tester le transport des e-mails SMTP)   Mailtrap   Création d'une nouvelle application Express  Pour créer une nouvelle application Web standard Express, vous devez utiliser le   : générateur d'application   npx express-generator --git --view=hbs  Cela créera une application Web avec un fichier   et  fichiers modèles. .gitignore   Guidon  Ensuite, vous devez ajouter le package Nodemailer npm et installer les dépendances d'Express :   npm i nodemailer && npm i  L'application par défaut générée par Express vous fournit deux fichiers de route :   et   . Supprimez la route   et créez un nouveau fichier de route appelé   . Ajoutez cette nouvelle route à votre fichier   et supprimez la   : /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); ...  La majeure partie du travail dans cette application se trouve dans le routeur des factures.  Avant de créer l'itinéraire, vous aurez besoin de certaines données que vous pourrez utiliser. Dans une application réelle, vous vous connecterez probablement à une base de données, mais à des fins de démonstration, ajoutez vos données de facturation à un fichier JSON.  Créez un nouveau fichier dans   et ajoutez ce qui suit : /data/invoices.json   [ { "id": "47427759-9362-4f8e-bfe4-2d3733534e83", "customer": "Bins and Sons", "contact_name": "Verne McKim", "contact_email": "vmckim0@example.com", "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": "jpretious1@example.com", "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": "estollenberg2@example.com", "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 } ]  Les trois factures que vous pouvez voir ci-dessus contiennent des données de client, de forfait et de facturation qui vous aideront à générer une facture dans la section suivante.   Création des routes des factures  Le fichier   créera trois nouvelles routes dans votre application : routes/invoices.js    – Une liste de toutes les factures du fichier de données plat ci-dessus. /invoices    – Un aperçu de la facture permettant aux utilisateurs de voir à quoi ressemblera la facture avant de l'envoyer au client. /invoices/:id    – Un point de terminaison qui génère et envoie la facture PDF à l'e-mail de contact enregistré. /invoices/:id/email  Ouvrez le fichier   et ajoutez l'extrait de code suivant pour définir les deux premières routes : 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;  Votre application est presque prête à être testée, mais vous devez d'abord créer les deux fichiers de vue.   Ajout de vues et de styles  Express sépare la logique et la présentation en   et   . Ajoutez maintenant deux nouveaux fichiers dans le répertoire   :   et   . routes/ views/ views/ invoice-list.hbs invoice-single.hbs  Ajoutez également ce qui suit à votre fichier   : 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}}  Ouvrez   fichier   et ajoutez ceci : le 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>  Pour ajouter des styles à la feuille de style de votre application et incorporer les  pour un look visuellement attrayant, veuillez ouvrir le fichier   et remplacer son contenu par l'extrait de code suivant. Cela importera Pure et créera une disposition de grille à colonne unique :   Module CSS pur 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/purecss@2.0.3/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>  Ouvrez   de votre application et ajoutez l'extrait de code CSS suivant : public/style.css file   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; }  Bien que ce ne soit pas obligatoire, l'ajout de styles à vos factures peut améliorer leur apparence professionnelle, car Foxit capture tout le style de votre document HTML lors de la génération de PDF.  Vous êtes maintenant prêt à tester votre application. Veuillez   start dans votre interface de ligne de commande et ouvrez votre navigateur Web sur   Une liste de factures semblable à celle-ci vous sera présentée :  run npm localhost:3000/invoices Cliquez sur "Voir" pour prévisualiser chaque facture.   Au cours des deux dernières étapes, vous utiliserez l'   __ pour générer des factures PDF. Une fois les factures générées, vous devrez ensuite les joindre à un e-mail à l'aide de Nodemailer avant de les envoyer. outil Foxit__ HTML vers PDF   Générer des PDF avec Foxit  Le SDK de Foxit offre une gamme de fonctionnalités pour la création et la manipulation de PDF, y compris la possibilité de générer un fichier PDF à partir d'un document HTML ou d'une URL. Le processus de téléchargement et de compilation de l'exécutable HTML vers PDF est disponible  . Une fois que vous avez exécuté avec succès la démo à partir de votre ligne de commande, vous pouvez passer aux étapes suivantes.   ici  La bibliothèque   de Node inclut une fonction appelée   qui vous permet d'exécuter des fonctions de ligne de commande. Cette méthode est utile pour exécuter des exécutables C++ à partir de Foxit. Pour exécuter l'exécutable HTML vers PDF, veuillez mettre à jour votre route   avec le code suivant : child_process exec() /: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'); } }); });  Avant d'exécuter ce code, assurez-vous de mettre à jour la variable   pour refléter le chemin correct vers votre exécutable   . htmlToPdfPath htmltopdf  Pour envoyer un rappel par e-mail pour une facture, veuillez revenir à votre liste de factures et cliquer sur "Rappel par e-mail" pour une facture spécifique. Cette action déclenchera l'application Node pour appeler l'exécutable   . L'exécutable, à son tour, convertira la facture du document HTML servi par Express en un fichier PDF. Vous pouvez localiser le fichier PDF résultant dans le répertoire   de votre application Web. htmltopdf invoices/  Maintenant que vous avez la possibilité de générer des factures PDF, la dernière étape consiste à envoyer ces factures à vos clients.  Envoyer des e-mails avec Nodemailer  offre une interface pratique qui vous permet d'accéder à différentes couches de transport de courrier électronique. SMTP est l'une des options les plus couramment utilisées, mais vous pouvez également utiliser des services comme Amazon SES ou la commande   de votre serveur comme alternatives.   Nodemailer sendmail  Pour tester Nodemailer, vous pouvez utiliser le  , qui vous permet de consigner le message sur votre console. Pour configurer votre message et l'envoyer à l'aide de Nodemailer, ajoutez l'extrait de code suivant juste en dessous de l'instruction   "PDF généré et enregistré dans..." dans votre route   :   option JSON du transport de flux console.log /invoices/:id/email   ... // Construct the message const message = { from: 'accounting@example.com', 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'); } }); ...  Veuillez actualiser votre application Node et cliquer sur "Email Reminder" pour l'une des factures. Cette fois, vous observerez l'objet de données de messagerie complet affiché au format JSON dans votre console.   { "from": { "address": "accounting@example.com", "name": "" }, "to": [ { "address": "jpretious1@example.com", "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": "<65ea9109-8d5a-295e-9295-8e98e1b2c667@example.com>" }  La chaîne   représente le fichier PDF encodé. Par souci de brièveté, je l'ai tronqué dans l'exemple ci-dessus. attachments.content  Pour tester l'e-mail à l'aide d'un vrai  , vous pouvez utiliser  . En supposant que vous ayez un compte avec Mailtrap, remplacez l'appel   par l'extrait de code suivant :   Serveur SMTP   Mailtrap createTransport({jsonTransport: true})   createTransport({ host: "smtp.mailtrap.io", port: 2525, auth: { user: "<YOUR_MAILTRAP_USERID>", pass: "<YOUR_MAILTRAP_PASS>" } })  Lors de l'envoi de la facture par e-mail, Mailtrap capturera le résultat et vous offrira la possibilité de télécharger la pièce jointe au format PDF. Si vous accédez à votre compte Mailtrap, vous trouverez un e-mail similaire à l'exemple ci-dessous :   Une fois que vous êtes prêt à déployer votre application en production, remplacez les informations d'identification SMTP Mailtrap par un serveur de messagerie de production. Notre application Web offre désormais la possibilité de générer et d'envoyer automatiquement des factures PDF aux clients à la demande de notre équipe de facturation.  Si vous avez besoin d'une solution pour présenter des factures en ligne et les envoyer au format PDF, notre application fournit une base fiable. Bien que l'outil HTML vers PDF de Foxit soit une option pratique et efficace pour générer des PDF, il est important de noter qu'il propose également diverses autres solutions. Avec leur  , Foxit s'impose comme le choix idéal pour intégrer la fonctionnalité PDF dans vos applications Web, mobiles ou de bureau.   kits de développement logiciel (SDK) disponibles pour plusieurs plates-formes  Également publié   . ici

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

This writer has a vested interest be it monetary, business, or otherwise, with 1 or more of the products or companies mentioned within.

Free Trial

Now Hiring

Cet audio est produit dans la langue originale de l'histoire !

Comment créer une application Web de facturation PDF à l'aide de NodeJS et du SDK Foxit PDF

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Créer des produits cryptographiques centrés sur l'utilisateur : l'importance des retours clients

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

Nomades numériques, écoutez : ce que vous devez savoir sur le nouveau visa DTV de la Thaïlande

Créer des produits cryptographiques centrés sur l'utilisateur : l'importance des retours clients

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

Nomades numériques, écoutez : ce que vous devez savoir sur le nouveau visa DTV de la Thaïlande

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps