使用 puppeteer 和 Node 來建立 PDF！-js教程-PHP中文網

首頁

web前端

js教程

使用 puppeteer 和 Node 來建立 PDF！

Patricia Arquette

Dec 27, 2024 pm 12:25 PM

如何使用 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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱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)

熱門話題

gmail信箱登陸入口在哪裡

7892

Java教學

1651

CakePHP 教程

1411

Laravel 教程

1302

PHP教程

1248

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。