首页 >web前端 >js教程 >使用 puppeteer 和 Node 来创建 PDF！

使用 puppeteer 和 Node 来创建 PDF！

Patricia Arquette原创: 2024-12-27 12:25:17651浏览

如何使用 Puppeteer 和 Node.js 创建 PDF 生成器

Use puppeteer with Node to create PDFs!

生成动态 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 文件作为可下载附件发送给客户端。

结论

Use puppeteer with Node to create PDFs!

就是这样！？您已经使用 Node.js 和 Puppeteer 构建了一个完整的 PDF 生成器。此设置根据用户输入动态生成 PDF 并将其作为可下载文件发送回。

这是您取得的成就：

使用 POST 端点设置 Node.js 服务器。
使用 Puppeteer 动态生成 PDF。
将生成的PDF发送回客户端。

奖金

如果您想生成结构良好且格式良好的 PDF（例如带有表格和样式的简历或发票），请在评论中告诉我。我很乐意为高级用例编写另一篇教程。

此外，请随时查看完整的项目代码。它有详细的文档并且适合初学者。

祝你有美好的一天！

以上是使用 puppeteer 和 Node 来创建 PDF！的详细内容。更多信息请关注PHP中文网其他相关文章！

postman define if for Directory using JS function this input github http Other

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：How Can Regular Expressions Be Used to Validate Passwords with Advanced Security Rules?下一篇：Why Do My React Array Children Need Unique Keys?

查看更多