首頁 >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

上一篇：如何使用正規表示式透過進階安全規則驗證密碼？下一篇：如何使用正規表示式透過進階安全規則驗證密碼？

看更多