如何使用 HTML 渲染器自動建立 PDF 文檔

自動化文件建立對於許多 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();

自訂影像尺寸：

• imageWidth 和 imageHeight 參數可讓您指定 PNG 影像的大小（以像素為單位）。
• 如果未提供 imageHeight，它將自動適應內容。

開始使用

ExoAPI 的 HTML 渲染器讓 SaaS 產品中的文件建立變得異常簡單且可自訂。只需幾行程式碼，您就可以自動產生 PDF 和圖像，簡化發票、報告和建立具有視覺吸引力的文件等流程。透過將 ExoAPI 整合到您的工作流程中，您可以增強應用程式的功能，同時節省手動文件建立任務的時間。

立即嘗試 ExoAPI，了解它如何簡化文件創建並提高 SaaS 應用程式的工作效率。查看官方 ExoAPI 文件以探索更多功能和自訂選項。

以上是如何使用 HTML 渲染器自動建立 PDF 文檔的詳細內容。更多資訊請關注PHP中文網其他相關文章！