生成付款发票是任何企业的一个重要方面，数字发票已成为各个行业的常见做法。在这种情况下，Web 应用程序开发人员经常面临以编程方式生成和发送 PDF 发票的任务。 无论您是自动化发票生成和通知流程，还是开发图形用户界面 (GUI) 来主动提醒客户未结发票，最初的技术挑战都在于生成 PDF 发票。虽然您可以开发用于 PDF 生成的自定义脚本，但这将是一项艰巨的任务。虽然基于网络的服务很方便，但如果您与客户签订了保密协议，则它们可能不适合，因为通过互联网将数据发送到第三方服务可能会引起担忧。 幸运的是，福昕 提供快速、安全的 PDF 文件生成解决方案。通过利用他们的 ，您可以将任何 HTML 文档（包括发票）转换为 PDF 文件，该文件可以附加到电子邮件中或供客户从您的 Web 应用程序下载。 PDF库 HTML 到 PDF 转换器 本教程将指导您完成创建 利用的应用程序 在 Web 应用程序中从 HTML 发票生成 PDF 发票。生成后，您将使用 通过 SMTP 将发票发送到客户的电子邮件地址。您可以按照下面概述的步骤操作或 。 Node.js 福昕PDF SDK 节点邮件程序 访问 Foxit 的 GitHub 存储库上的完整代码库 构建 Web 应用程序来创建和发送 PDF 发票 在本教程中，我们将引导您完成构建 Web 应用程序的过程，该应用程序使您的计费部门能够有效地管理未付发票。您将创建各种功能，包括用于跟进的内部工具、显示未结发票的页面以及每个发票的预览页面。用户可以选择向客户发送电子邮件提醒并附上发票。 对于这个项目，我们将利用 网络框架， 用于造型，以及 用于电子邮件功能。 表达 纯CSS 节点邮件程序 先决条件： 版本 8+ 和 版本 5+   Node.js 国家公共管理  Foxit SDK（您可以 来自他们网站的版本） 下载免费试用版  Foxit  HTML 到 PDF 转换插件 （可选，用于测试 SMTP 电子邮件传输） 邮件陷阱 创建新的 Express 应用程序 要创建新的样板 Express Web 应用程序，您需要使用 ： 应用程序生成器   npx express-generator --git --view=hbs 这将创建一个带有 文件的 Web 应用程序，并且 模板文件。 .gitignore 车把 接下来，您需要添加 Nodemailer npm 包并安装 Express 的依赖项：   npm i nodemailer && npm i  Express 生成的默认应用程序为您提供了两个路由文件：  和  。删除 路由并创建一个名为 的新路由文件。将此新路由添加到您的 文件并删除  ： /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": "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 } ] 您在上面看到的三张发票包含客户、计划和账单数据，这些数据将帮助您在下一部分中生成发票。 创建发票路线 文件将在您的应用程序中创建三个新路由： routes/invoices.js    – 上面平面数据文件中所有发票的列表。 /invoices    – 发票预览，以便用户可以在将发票发送给客户之前查看发票的外观。 /invoices/:id    – 生成 PDF 发票并将其发送到存档的联系人电子邮件的端点。 /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; 您的应用程序几乎已准备好进行测试，但您需要首先创建两个视图文件。 添加视图和样式 Express 将逻辑和表示分离为 和  。现在将两个新文件添加到 目录中：  和  。 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> 将样式添加到应用程序的样式表并合并 为了获得视觉上吸引人的外观，请打开 文件并将其内容替换为以下代码片段。这将导入 Pure 并创建单列网格布局： 纯CSS模块 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> 打开应用程序的 并添加以下 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; } 虽然不是强制性的，但向发票添加样式可以增强其专业外观，因为福昕在生成 PDF 时会捕获 HTML 文档中的所有样式。 现在，您已准备好测试您的应用程序。请在命令行界面中  start 并打开 Web 浏览器到 您将看到类似于以下内容的发票列表：  run npm localhost:3000/invoices 单击“查看”可预览每张发票。  在最后两个步骤中，您将使用 Foxit__  __ 生成 PDF 发票。生成发票后，您将在发送之前使用 Nodemailer 将其附加到电子邮件中。 HTML 到 PDF 工具 使用 Foxit 生成 PDF  Foxit的SDK提供了一系列用于PDF创建和操作的功能，包括从HTML文档或URL生成PDF文件的能力。下载 HTML 并将其编译为 PDF 可执行文件的过程可用 。从命令行成功执行演示后，您可以继续执行后续步骤。 这里  Node 的 库包含一个名为 的函数，使您能够执行命令行函数。此方法对于从 Foxit 运行 C++ 可执行文件很有用。要执行 HTML 到 PDF 可执行文件，请使用以下代码更新您的 路由： 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'); } }); }); 在运行此代码之前，请确保更新 变量以反映 可执行文件的正确路径。 htmlToPdfPath htmltopdf 要发送发票电子邮件提醒，请返回发票列表，然后单击任何特定发票的“电子邮件提醒”。此操作将触发 Node 应用程序调用 可执行文件。反过来，可执行文件会将 Express 提供的 HTML 文档中的发票转换为 PDF 文件。您可以在 Web 应用程序的 目录中找到生成的 PDF 文件。 htmltopdf invoices/ 现在您已经能够生成 PDF 发票了，最后一步是将这些发票发送给您的客户。 使用 Nodemailer 发送电子邮件 提供方便的界面，允许您访问各种电子邮件传输层。 SMTP 是最常用的选项之一，但您也可以使用 Amazon SES 等服务或服务器的 命令作为替代方案。 节点邮件程序 sendmail 要测试 Nodemailer，您可以使用 ，它允许您将消息记录到控制台。要设置消息并使用 Nodemailer 发送，请在 路径中的“PDF generated and save to...”  语句下方添加以下代码片段： 流传输的 JSON 选项 /invoices/:id/email console.log   ... // 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'); } }); ... 请刷新您的节点应用程序，然后单击任何发票的“电子邮件提醒”。这次，您将观察到在控制台中显示为 JSON 的完整电子邮件数据对象。   { "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>" }   字符串表示编码的 PDF 文件。为了简洁起见，我在上面的示例中截断了它。 attachments.content 使用真实的电子邮件测试电子邮件 ， 您可以使用 。假设您有 Mailtrap 帐户，请将 调用替换为以下代码片段： SMTP服务器 邮件陷阱 createTransport({jsonTransport: true})   createTransport({ host: "smtp.mailtrap.io", port: 2525, auth: { user: "<YOUR_MAILTRAP_USERID>", pass: "<YOUR_MAILTRAP_PASS>" } }) 通过电子邮件发送发票后，Mailtrap 将捕获输出并为您提供下载 PDF 附件的选项。如果您访问 Mailtrap 帐户，您将看到一封类似于以下示例的电子邮件：  准备好将应用程序部署到生产环境后，请将 Mailtrap SMTP 凭据替换为生产邮件服务器。我们的网络应用程序现在能够根据我们的计费团队的要求生成 PDF 发票并自动发送给客户。 如果您需要在线提供发票并将其作为 PDF 发送的解决方案，我们的应用程序可以提供可靠的基础。虽然福昕的 HTML 转 PDF 工具是生成 PDF 的便捷高效的选项，但值得注意的是，它们还提供各种其他解决方案。和他们的  ，将 PDF 功能集成到您的 Web、移动或桌面应用程序中时，Foxit 是理想的选择。 适用于多个平台的软件开发套件 (SDK) 也发布 。 在这里

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.

如何使用 NodeJS 和 Foxit PDF SDK 创建 PDF 发票 Web 应用程序

About Author

註釋

標籤

这篇文章刊登在

Related Stories

架构师指南：构建 AI/ML 数据湖参考架构

Floki 的 Valhalla 成为印度环斯里兰卡赛事联合赞助商

如何将您的工作流程提高 10 倍：17 个必备应用程序

从论坛到信息流：社交媒体算法如何塑造数字互动

架构师指南：构建 AI/ML 数据湖参考架构

Floki 的 Valhalla 成为印度环斯里兰卡赛事联合赞助商

如何将您的工作流程提高 10 倍：17 个必备应用程序

从论坛到信息流：社交媒体算法如何塑造数字互动

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps