A geração de faturas de pagamento é um aspecto crucial de qualquer negócio, e o faturamento digital tornou-se uma prática comum em vários setores. Nesse contexto, os desenvolvedores de aplicativos da Web geralmente enfrentam a tarefa de gerar e enviar faturas em PDF programaticamente.  Esteja você automatizando o processo de geração e notificação de faturas ou desenvolvendo uma interface gráfica do usuário (GUI) para lembrar proativamente os clientes sobre faturas pendentes, o desafio técnico inicial está na geração de faturas em PDF. Embora você possa desenvolver um script personalizado para geração de PDF, isso seria uma tarefa significativa. Embora os serviços baseados na Web sejam convenientes, eles podem não ser adequados se você tiver acordos de confidencialidade com seus clientes, pois o envio de dados para um serviço de terceiros pela Internet pode causar problemas.  Felizmente, a Foxit  fornece uma solução rápida e segura para gerar arquivos PDF. Ao utilizar seus  , você pode converter qualquer documento HTML, incluindo faturas, em um arquivo PDF que pode ser anexado a um e-mail ou disponibilizado para os clientes fazerem o download de seu aplicativo da web.   Biblioteca de PDF   Conversor de HTML para PDF  Este tutorial irá guiá-lo através do processo de criação de um  aplicativo que potencializa o  para gerar faturas em PDF a partir de faturas em HTML em um aplicativo da web. Uma vez gerado, você utilizará  para enviar a Fatura via SMTP para o endereço de e-mail do cliente. Você pode seguir as etapas descritas abaixo ou  .   Node.js   Foxit PDF SDK   Nodemailer   acesse a base de código completa no repositório GitHub da Foxit   Construindo um aplicativo da Web para criar e enviar faturas em PDF  Neste tutorial, orientaremos você no processo de criação de um aplicativo da Web que permite que seu departamento de cobrança gerencie faturas não pagas com eficiência. Você criará vários recursos, incluindo uma ferramenta interna para acompanhamento, uma página de exibição de faturas pendentes e uma página de visualização de cada fatura. Os usuários terão a opção de enviar lembretes por e-mail aos clientes com a fatura anexada.  Para este projeto, utilizaremos o  estrutura da web,  para estilizar e  para a funcionalidade de e-mail.   Expressar   CSS puro   Nodemailer   Pré-requisitos:  versão 8+ e  versão 5+   Node.js   NPM  O Foxit SDK (você pode  versão do site deles)   baixar uma avaliação gratuita  O  complemento de conversão Foxit HTML para PDF  (opcional, para testar o transporte de e-mail SMTP)   Mailtrap   Criando um novo aplicativo expresso  Para criar um novo aplicativo da web padrão do Express, você precisa usar o   : gerador de aplicativos   npx express-generator --git --view=hbs  Isso criará um aplicativo da web com um arquivo   e  arquivos de modelo. .gitignore   Guidão  Em seguida, você precisa adicionar o pacote Nodemailer npm e instalar as dependências do Express:   npm i nodemailer && npm i  O aplicativo padrão gerado pelo Express fornece dois arquivos de rota:   e   . Remova a rota   e crie um novo arquivo de rota chamado   . Adicione esta nova rota ao seu arquivo   e remova o   : /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); ...  A maior parte do trabalho neste aplicativo está dentro do roteador de faturas.  Antes de criar a rota, você precisará de alguns dados que possa usar. Em um aplicativo real, você provavelmente se conectará a um banco de dados, mas, para fins de demonstração, adicione os dados da fatura a um arquivo JSON.  Crie um novo arquivo em   e adicione o seguinte: /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 } ]  As três faturas que você pode ver acima contêm dados de cliente, plano e cobrança que o ajudarão a gerar uma fatura na próxima seção.   Criando as Rotas de Faturas  O arquivo   criará três novas rotas em seu aplicativo: routes/invoices.js    – Uma lista de todas as faturas do arquivo de dados simples acima. /invoices    – Uma visualização da fatura para que os usuários possam ver como será a fatura antes de enviá-la ao cliente. /invoices/:id    – Um terminal que gera e envia a fatura em PDF para o e-mail de contato que está arquivado. /invoices/:id/email  Abra o arquivo   e adicione o seguinte trecho de código para definir as duas primeiras rotas: 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;  Seu aplicativo está quase pronto para teste, mas primeiro você precisa criar os dois arquivos de exibição.   Adicionando exibições e estilos  O Express separa a lógica e a apresentação em   e   . Agora adicione dois novos arquivos ao diretório   :   e   . routes/ views/ views/ invoice-list.hbs invoice-single.hbs  Além disso, adicione o seguinte ao seu arquivo   : 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}}  Abra   arquivo   e adicione isto: o 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>  Para adicionar estilos à folha de estilo do seu aplicativo e incorporar o  para uma aparência visualmente atraente, abra o arquivo   e substitua seu conteúdo pelo trecho de código a seguir. Isso importará Pure e criará um layout de grade de coluna única:   Módulo CSS puro 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>  Abra   de seu aplicativo e adicione o seguinte trecho de código CSS: 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; }  Embora não seja obrigatório, adicionar estilos às suas faturas pode melhorar sua aparência profissional, pois o Foxit captura todo o estilo do seu documento HTML ao gerar PDFs.  Agora, você está pronto para testar seu aplicativo.   start em sua interface de linha de comando e abra seu navegador da Web em   Você verá uma lista de faturas semelhante à seguinte:  run npm localhost:3000/invoices Clique em “Visualizar” para visualizar cada fatura.   Nas duas etapas finais, você utilizará a   __ para gerar faturas em PDF. Assim que as faturas forem geradas, você irá anexá-las a um e-mail usando o Nodemailer antes de enviá-las. ferramenta Foxit__ HTML para PDF   Gerando PDFs com Foxit  O SDK da Foxit oferece uma variedade de funcionalidades para criação e manipulação de PDF, incluindo a capacidade de gerar um arquivo PDF a partir de um documento HTML ou URL. O processo de download e compilação do executável HTML para PDF está disponível  . Depois de executar com sucesso a demonstração na linha de comando, você pode prosseguir com as próximas etapas.   aqui  A biblioteca   do Node inclui uma função chamada   que permite executar funções de linha de comando. Este método é útil para executar executáveis C++ da Foxit. Para executar o executável HTML para PDF, atualize sua rota   com o seguinte código: 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'); } }); });  Antes de executar este código, certifique-se de atualizar a variável   para refletir o caminho correto para seu executável   . htmlToPdfPath htmltopdf  Para enviar um lembrete por e-mail para uma fatura, volte à sua lista de faturas e clique em “Lembrete por e-mail” para qualquer fatura específica. Essa ação acionará o aplicativo Node para chamar o executável   . O executável, por sua vez, converterá a fatura do documento HTML servido pelo Express em um arquivo PDF. Você pode localizar o arquivo PDF resultante no diretório   de seu aplicativo da web. htmltopdf invoices/  Agora que você pode gerar faturas em PDF, a etapa final é enviar essas faturas para seus clientes.  Enviando e-mails com Nodemailer  oferece uma interface conveniente que permite acessar várias camadas de transporte de e-mail. O SMTP é uma das opções mais usadas, mas você também pode utilizar serviços como o Amazon SES ou o comando   do seu servidor como alternativas.   Nodemailer sendmail  Para testar o Nodemailer, você pode utilizar o  , que permite registrar a mensagem em seu console. Para configurar sua mensagem e enviá-la usando o Nodemailer, adicione o seguinte trecho de código logo abaixo da instrução “PDF gerado e salvo em…”   em sua rota   :   opção JSON do transporte de fluxo 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'); } }); ...  Atualize seu aplicativo Node e clique em “Email Reminder” para qualquer uma das faturas. Desta vez, você observará o objeto de dados de email completo exibido como JSON em seu 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>" }  A string   representa o arquivo PDF codificado. Por uma questão de brevidade, trunquei-o no exemplo acima. attachments.content  Para testar o e-mail usando um real  , você pode usar  . Supondo que você tenha uma conta no Mailtrap, substitua a chamada   pelo seguinte trecho de código:   servidor SMTP   Mailtrap createTransport({jsonTransport: true})   createTransport({ host: "smtp.mailtrap.io", port: 2525, auth: { user: "<YOUR_MAILTRAP_USERID>", pass: "<YOUR_MAILTRAP_PASS>" } })  Ao enviar a fatura por e-mail, o Mailtrap capturará a saída e fornecerá a você a opção de baixar o anexo em PDF. Ao acessar sua conta Mailtrap, você encontrará um e-mail semelhante ao exemplo abaixo:   Quando estiver pronto para implantar seu aplicativo na produção, substitua as credenciais Mailtrap SMTP por um servidor de e-mail de produção. Nosso aplicativo da web agora oferece a capacidade de gerar e enviar automaticamente faturas em PDF para clientes mediante solicitação de nossa equipe de cobrança.  Se você precisar de uma solução para apresentar faturas online e enviá-las como PDFs, nosso aplicativo oferece uma base confiável. Embora a ferramenta HTML para PDF da Foxit seja uma opção conveniente e eficiente para gerar PDFs, é importante observar que eles também oferecem várias outras soluções. Com seus  , o Foxit se destaca como a escolha ideal ao integrar a funcionalidade PDF em seus aplicativos da Web, dispositivos móveis ou desktop.   kits de desenvolvimento de software (SDKs) disponíveis para várias plataformas  Publicado também   . aqui

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

Este áudio é produzido no idioma original da história!

Muito longo; Para ler

Boost your HackerNoon story @ $159.99! 🚀

Como criar um aplicativo da Web de faturamento em PDF usando NodeJS e Foxit PDF SDK

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Guia do arquiteto para construir arquitetura de referência para um Datalake de IA/ML

Criando produtos criptográficos centrados no usuário: a importância do feedback do cliente

Navegando pelas águas: desenvolvendo aplicações RAG de nível de produção com data lakes

Como melhorar seu fluxo de trabalho em 10 vezes: 17 aplicativos essenciais

Guia do arquiteto para construir arquitetura de referência para um Datalake de IA/ML

Criando produtos criptográficos centrados no usuário: a importância do feedback do cliente

Navegando pelas águas: desenvolvendo aplicações RAG de nível de produção com data lakes

Como melhorar seu fluxo de trabalho em 10 vezes: 17 aplicativos essenciais

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps