使用 puppeteer 和 Node 来创建 PDF！
如何使用 Puppeteer 和 Node.js 创建 PDF 生成器
生成动态 PDF 是 Web 开发中的常见要求。无论是发票、报告还是简历，创建强大的 PDF 生成器都是开发人员的一项基本技能。在本文中，我将引导您使用 Node.js 和 Puppeteer（一个强大的无头浏览器库）构建 PDF 生成器。
作为示例，我使用相同的方法来构建我的 CV Maker 项目，它接受用户输入并动态生成 PDF。您可以在此处查看该项目的现场演示：Live Demo。
本指南以简单、适合初学者的语言编写。如果有任何不清楚的地方，请随时发表评论，我会尽快解决。
先决条件
在我们开始之前，请确保您具备以下条件：
- Node.js 安装在您的计算机上。
- 基本的 Node.js 项目框架 设置。
- Puppeteer 作为项目中的依赖项安装：
npm install puppeteer
如果您想参考本教程的完整源代码，请查看我的 GitHub 存储库。
第 1 步：创建用于接收数据的 POST 端点
首先，创建一个端点，客户端可以在其中发送数据以生成 PDF。为此，我们将在 index.js（或等效的主服务器文件）中定义一个简单的 POST 路由。
app.post("/data", async (req: Request, res: Response) => {
let postData = req.body.data; // Storing the data sent from the client
});
该端点将接收需要包含在PDF中的数据。
第2步：创建控制器文件
为了保持代码井井有条，请在项目目录中创建一个名为“controllers”的文件夹。在此文件夹中，创建一个名为 PdfController.js 的文件。
控制器文件是我们编写生成 PDF 逻辑的地方。这使我们的代码保持模块化并使其更易于维护。
第 3 步：编写 PDF 生成逻辑
在 PdfController.js 中，添加以下代码以使用 Puppeteer 生成 PDF：
export default (async function (postData) {
try {
const browser = await puppeteer.launch({
headless: true,
args: ["--no-sandbox", "--disable-gpu"],
});
const page = await browser.newPage();
const content = `<html><body><h1>${postData}</h1></body></html>`;
await page.setContent(content);
await page.emulateMediaType('screen');
await page.pdf({
path: 'resume.pdf',
format: 'A4',
printBackground: true,
});
console.log('PDF created');
await browser.close();
} catch (err) {
console.error('Error:', err);
}
});
以下是这段代码的作用：
- 以无头模式启动 Puppeteer 浏览器实例。
- 打开一个新页面并使用用户提供的数据设置内容。
- 将页面内容转换为PDF并另存为resume.pdf。
- 关闭浏览器以释放资源。
步骤 4：在 POST 端点中使用 PdfController 函数
现在，将 PdfController 函数连接到 index.js 中的 POST 端点：
import PdfController from "./controllers/controller.js";
app.post("/data", async (req: Request, res: Response) => {
let postData = req.body.data; // Storing the data sent from the client
await PdfController(postData);
});
这确保每当调用 /data 端点时，都会执行生成 PDF 的逻辑。
第 5 步：验证 PDF 生成
此时，您可以使用 Postman 或任何其他 HTTP 客户端来测试端点。当您发送带有相关文本数据的 POST 请求时，将在项目的根目录中创建一个名为resume.pdf 的 PDF。
第 6 步：将 PDF 发送回客户
要将生成的 PDF 作为响应发送回客户端，请安装 fs-extra 软件包：
npm install puppeteer
然后按如下方式更新 POST 端点：
app.post("/data", async (req: Request, res: Response) => {
let postData = req.body.data; // Storing the data sent from the client
});
此代码将resume.pdf 文件作为可下载附件发送给客户端。
结论
就是这样！ ？您已经使用 Node.js 和 Puppeteer 构建了一个完整的 PDF 生成器。此设置根据用户输入动态生成 PDF 并将其作为可下载文件发送回。
这是您取得的成就：
- 使用 POST 端点设置 Node.js 服务器。
- 使用 Puppeteer 动态生成 PDF。
- 将生成的PDF发送回客户端。
奖金
如果您想生成结构良好且格式良好的 PDF（例如带有表格和样式的简历或发票），请在评论中告诉我。我很乐意为高级用例编写另一篇教程。
此外，请随时查看完整的项目代码。它有详细的文档并且适合初学者。
祝你有美好的一天！
以上是使用 puppeteer 和 Node 来创建 PDF！的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
神秘的JavaScript：它的作用以及为什么重要
Apr 09, 2025 am 12:07 AM
JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。
JavaScript的演变：当前的趋势和未来前景
Apr 10, 2025 am 09:33 AM
JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。
JavaScript引擎：比较实施
Apr 13, 2025 am 12:05 AM
不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。
Python vs. JavaScript：学习曲线和易用性
Apr 16, 2025 am 12:12 AM
Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。
JavaScript：探索网络语言的多功能性
Apr 11, 2025 am 12:01 AM
JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。
如何使用Next.js（前端集成）构建多租户SaaS应用程序
Apr 11, 2025 am 08:22 AM
本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。 前端获取用户权限以控制UI的可见性并确保API要求遵守角色库
从C/C到JavaScript：所有工作方式
Apr 14, 2025 am 12:05 AM
从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。
使用Next.js（后端集成）构建多租户SaaS应用程序
Apr 11, 2025 am 08:23 AM
我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。 首先，什么是多租户SaaS应用程序？ 多租户SaaS应用程序可让您从唱歌中为多个客户提供服务
