如何集成Resend？用htmldocs自动生成并发送PDF邮件附件-平芜编程栈

如何集成Resend？用htmldocs自动生成并发送PDF邮件附件

【免费下载链接】htmldocsThe modern alternative to LaTeX. Create PDF documents templates using React, JSX, and Tailwind项目地址: https://gitcode.com/gh_mirrors/ht/htmldocs

htmldocs是一款基于React、JSX和Tailwind的现代化PDF文档模板创建工具，作为LaTeX的理想替代品，它能帮助用户轻松生成专业的PDF文件。本文将详细介绍如何将Resend与htmldocs集成，实现PDF邮件附件的自动生成与发送，让你的文档处理流程更加高效便捷。

集成Resend前的准备工作 📋

在开始集成Resend之前，我们需要完成以下几个关键步骤，为后续的操作做好充分准备。

1. 发布发票模板到htmldocs

首先，你需要将准备好的发票模板发布到htmldocs平台。这一步是实现PDF生成的基础，具体操作可以参考官方文档中的发布到云端指南，按照其中的步骤完成模板的发布。

2. 安装Resend依赖

接下来，我们需要安装Resend的相关依赖。根据你所使用的包管理器，在项目根目录下执行以下命令之一：

npm install resend

pnpm install resend

yarn install resend

bun install resend

3. 配置Resend API密钥

Resend的使用需要API密钥的支持，你需要在Resend官网注册账号并获取API密钥。然后，在你的项目环境中设置该密钥，你可以在项目的环境变量文件中添加如下配置：

RESEND_API_KEY=your_resend_api_key

将其中的your_resend_api_key替换为你实际获取到的Resend API密钥。

在htmldocs中集成Resend的实现步骤 🚀

完成了前期的准备工作后，我们就可以开始在htmldocs中集成Resend，实现PDF邮件附件的自动生成与发送了。

1. 导入Resend并初始化

首先，在你的代码文件中导入Resend模块，并使用之前配置的API密钥进行初始化。代码如下：

import { Resend } from 'resend'; const resend = new Resend(process.env.RESEND_API_KEY);

2. 定义相关接口类型

为了确保数据的规范性和类型安全，我们需要定义一些与发票相关的接口类型。这些接口将帮助我们更好地组织和传递数据。

interface BilledTo { name: string; address: string; city: string; state: string; zip: string; phone: string; } interface YourCompany { name: string; address: string; city: string; state: string; zip: string; taxId: string; phone: string; email: string; } interface Service { name: string; description?: string; quantity: number; rate: number; }

3. 编写发送发票邮件的函数

接下来，我们编写一个用于发送发票邮件的异步函数。这个函数将完成PDF的生成和邮件的发送两个核心操作。

首先，通过htmldocs的API生成PDF文档。我们需要向htmldocs的API端点发送POST请求，传递必要的参数，包括文档格式和相关属性。

async function sendInvoiceEmail() { try { // 1. Generate the invoice using htmldocs API const response = await fetch('https://api.htmldocs.com/api/documents/invoice', { method: 'POST', headers: { 'Authorization': `Bearer ${process.env.HTMLDOCS_API_KEY}`, 'Content-Type': 'application/json', }, body: JSON.stringify({ format: 'pdf', props: { billedTo: { name: "Acme Corp", address: "123 Business Ave", city: "San Francisco", state: "CA", zip: "94107", phone: "555-0123" }, yourCompany: { name: "Your Company", address: "456 Banana Rd.", city: "San Francisco", state: "CA", zip: "94107", taxId: "00XXXXX1234X0XX", phone: "123-456-7890", email: "hello@email.com" }, services: [ { name: "Premium License", description: "Annual subscription", quantity: 1, rate: 999.00 } ] } }) });

在这个请求中，我们需要提供htmldocs的API密钥进行身份验证，同时指定生成的文档格式为PDF，并传递发票的相关属性，如客户信息、公司信息和服务项目等。

如果请求成功，我们将获取到生成的PDF文档的二进制数据。然后，使用Resend发送包含该PDF附件的邮件。

if (!response.ok) { const errorData = await response.json().catch(() => null); throw new Error( `Failed to generate invoice: ${response.status} ${response.statusText}${ errorData ? ` - ${JSON.stringify(errorData)}` : '' }` ); } const documentBuffer = await response.arrayBuffer(); // 2. Send email with the generated invoice const data = await resend.emails.send({ from: 'you@yourdomain.com', to: 'recipient@example.com', subject: 'Invoice for Your Recent Services', attachments: [ { content: Buffer.from(documentBuffer), filename: 'invoice.pdf', }, ], html: ` <div style="font-family: sans-serif; max-width: 600px; margin: 0 auto;"> <h2 style="color: #1a1a1a;">Your Invoice</h2> <p style="color: #4a4a4a; font-size: 16px; line-height: 1.5;"> Thank you for your business. Please find your invoice attached to this email. </p> <p style="color: #4a4a4a; font-size: 16px; line-height: 1.5;"> Payment is due within 15 days from the invoice date. For your convenience, payment instructions are included in the invoice. </p> <p style="color: #4a4a4a; font-size: 16px; line-height: 1.5;"> If you have any questions about this invoice, please contact our billing department using the contact information provided in the invoice. </p> <hr style="border: none; border-top: 1px solid #e1e1e1; margin: 30px 0;" /> <p style="color: #898989; font-size: 14px;"> This is an automated message. Please do not reply to this email. </p> </div> `, }); console.log('Email sent successfully:', data); } catch (error) { if (error instanceof Error) { console.error('Error:', error.message); } else { console.error('Unknown error:', error); } throw error; // Re-throw to handle it in the calling code } }

在发送邮件时，我们需要指定发件人、收件人、邮件主题、附件以及邮件的HTML内容。其中，附件就是我们刚刚生成的PDF文档，我们将其转换为Buffer格式并添加到邮件中。

4. 使用htmldocs编辑器创建和编辑模板

htmldocs提供了直观易用的编辑器，让你可以轻松创建和编辑PDF模板。你可以在编辑器中选择各种预设模板，如简历、发票、书籍等，并根据自己的需求进行自定义修改。

上图展示的是htmldocs编辑器的简历模板编辑界面，你可以看到左侧是模板列表，右侧是预览区域，你可以在编辑区对模板内容进行修改，实时查看效果。

5. 运行开发服务器预览效果

在开发过程中，你可以运行htmldocs的开发服务器，实时预览你的模板效果。开发服务器会自动监测文件的变化并进行热重载，让你的开发效率更高。

如上图所示，开发服务器运行后，你可以在浏览器中查看模板的实时预览效果，方便你进行调整和优化。

总结

通过本文的介绍，你已经了解了如何将Resend与htmldocs集成，实现PDF邮件附件的自动生成与发送。从前期的准备工作到具体的实现步骤，我们详细讲解了每一个环节，希望能帮助你顺利完成集成。

如果你想了解更多关于文档生成的信息，可以参考htmldocs的API参考文档。通过Resend和htmldocs的强大功能，你可以轻松构建高效、专业的文档处理流程，提升工作效率。

现在，就动手尝试将Resend集成到你的htmldocs项目中，体验自动生成和发送PDF邮件附件的便捷吧！

【免费下载链接】htmldocsThe modern alternative to LaTeX. Create PDF documents templates using React, JSX, and Tailwind项目地址: https://gitcode.com/gh_mirrors/ht/htmldocs

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

如何集成Resend？用htmldocs自动生成并发送PDF邮件附件