如何使用 HTML 渲染器自動建立 PDF 文檔-js教程-PHP中文網

How to Automate PDF Document Creation with an HTML Renderer

自動化文件建立對於許多 SaaS 產品來說是一個至關重要的功能，無論是產生發票、報告或證書。使用 HTML 渲染器，開發人員只需幾行程式碼即可將動態 HTML 內容轉換為高品質的 PDF 文件或 PNG 映像。在本指南中，我們將向您展示如何將 ExoAPI 的文件建立功能整合到您的 SaaS 產品中，從而節省時間和精力。

為什麼要自動產生文件？

自動化文件建立使企業能夠：

大規模產生一致、專業的文件。
透過自動執行發票或報告產生等重複性任務來節省時間。
透過消除手動文件建立來提高準確性，降低錯誤風險。
根據動態資料為客戶提供客製化文件（例如個人化報告）。

自動產生文件的用例

以下是一些文件自動化功能可以簡化您的 SaaS 產品工作流程的實際範例：

發票系統：根據訂單詳細資料自動產生客戶發票的 PDF。範例：客戶下訂單後，動態產生品牌發票 PDF 並透過電子郵件發送給他們。
報告儀表板：允許使用者下載 PDF 格式的報告。範例：提供分析功能的 SaaS 產品可以讓使用者將資料匯出為具有專業外觀的 PDF 報告。
證書和徽章：為課程完成、活動或成就建立可下載的 PNG 證書或徽章。範例：電子學習平台可以在完成課程後自動為學生產生客製化證書。
電子商務訂單摘要：自動產生 PDF 或 PNG 格式的訂單確認或出貨標籤。範例：下訂單後，產生 PDF 格式的運送標籤，準備列印。

讓我們逐步了解如何使用 ExoAPI 的 HTML 渲染器設定自動文件產生。

先決條件：註冊 ExoAPI

存取 ExoAPI 並註冊帳戶以取得您的 API 金鑰。

1. 安裝SDK：

npm install @flower-digital/exoapi-sdk

登入後複製

2. 建立ExoAPI實例：

在您的 JavaScript 或 Node.js 應用程式中，使用您的 API 金鑰初始化 ExoAPI：

import { ExoAPI } from "@flower-digital/exoapi-sdk";
const exoapi = new ExoAPI({ apiKey: YOUR_API_KEY });

登入後複製

基本 PDF 生成範例

現在，讓我們來看一個從 HTML 內容產生 PDF 的簡單範例。以下程式碼片段展示如何建立具有基本樣式的 PDF 文件：

npm install @flower-digital/exoapi-sdk

登入後複製

運作原理：

htmlRenderer() 函數將 HTML 字串傳送到 ExoAPI，ExoAPI 會處理並傳回 PDF 文件。
我們使用 Node.js 的 fs 模組將 PDF 保存在本地，將檔案寫入 document.pdf。
您可以根據應用程式的要求（例如客戶詳細資料、訂單摘要）將 HTML 字串替換為動態內容或範本。

高級 PDF 客製

ExoAPI 提供了多種選項來自訂您的 PDF。您可以控制頁面大小、邊距、方向、頁首、頁腳，甚至可以注入自訂 CSS 以實現精確的樣式。

這是一個進階範例，展示如何自訂 PDF 輸出：

import { ExoAPI } from "@flower-digital/exoapi-sdk";
const exoapi = new ExoAPI({ apiKey: YOUR_API_KEY });

登入後複製

關鍵參數：

標題：PDF文件的標題，將出現在元資料中。
pageSize：定義 PDF 的大小（例如 A4、Letter 等）。您也可以使用 pageWidth 和 pageHeight 設定顯式尺寸。
margin：設定統一的邊距，或使用marginTop、marginLeft等，更精細的控制。
landscape：橫向設定為 true，縱向設定為 false。
css：可以新增自訂 CSS 來設定文件內容的樣式。
頁首和頁尾：您可以新增頁首和頁尾以及頁碼、總頁數和日期的佔位符。

產生 PNG 圖像

ExoAPI 也支援從 HTML 內容產生 PNG 映像。當您需要視覺輸出（例如徽章、證書或視覺報告）時，這非常有用。以下是如何產生 PNG 影像的範例：

import { ExoAPI } from "@flower-digital/exoapi-sdk";
import fs from "fs";

const exoapi = new ExoAPI({ apiKey: YOUR_API_KEY });

async function htmlRenderer() {
  try {
    const res = await exoapi.htmlRenderer({
      html: '<p style="padding:8px;font-size:36px">Hello <b style="color: green">world!</b></p>',
      format: "pdf",
    });
    fs.writeFileSync("document.pdf", Buffer.from(await res.arrayBuffer()));
    console.log("PDF document generated successfully!");
  } catch (err) {
    console.error("Error generating PDF:", err);
  }
}

htmlRenderer();

登入後複製