ホームページ > ウェブフロントエンド > jsチュートリアル > HTML レンダラーを使用して PDF ドキュメントの作成を自動化する方法

HTML レンダラーを使用して PDF ドキュメントの作成を自動化する方法

Barbara Streisand
リリース: 2024-10-18 18:38:30
オリジナル
362 人が閲覧しました

How to Automate PDF Document Creation with an HTML Renderer

ドキュメント作成の自動化は、請求書、レポート、証明書の生成など、多くの SaaS 製品にとって重要な機能です。 HTML レンダラーを使用すると、開発者はわずか数行のコードで動的 HTML コンテンツを高品質の PDF ドキュメントまたは PNG 画像に変換できます。このガイドでは、ExoAPI のドキュメント作成機能を SaaS 製品に統合して、時間と労力を節約する方法を説明します。

ドキュメント生成を自動化する理由

ドキュメント作成を自動化することで、企業は次のことが可能になります。

  • 一貫性のあるプロフェッショナルな外観のドキュメントを大規模に生成します。
  • 請求書発行やレポート作成などの反復的なタスクを自動化して時間を節約します。
  • 手動によるドキュメント作成を排除して精度を向上させ、エラーのリスクを軽減します。
  • 動的データに基づいてカスタマイズされたドキュメント (パーソナライズされたレポートなど) を顧客に提供します。

自動ドキュメント生成の使用例

ここでは、ドキュメント自動化機能によって SaaS 製品のワークフローを簡素化できる実用的な例をいくつか示します。

  • 請求システム: 注文の詳細に基づいて顧客の請求書の PDF を自動的に生成します。例: 顧客が注文した後、ブランドの入った請求書 PDF を動的に生成し、電子メールで送信します。
  • レポート ダッシュボード: ユーザーがレポートを PDF としてダウンロードできるようにします。例: 分析を提供する SaaS 製品を使用すると、ユーザーはデータを本格的な PDF レポートとしてエクスポートできます。
  • 証明書とバッジ: コース完了、イベント、または成果に対して、ダウンロード可能な PNG 証明書またはバッジを作成します。例: e ラーニング プラットフォームは、コース完了時に学生向けにカスタマイズされた証明書を自動的に生成できます。
  • E コマース用の注文概要: 注文確認書または配送ラベルを 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 });
ログイン後にコピー
ログイン後にコピー

主要なパラメータ:

  • title: PDF ドキュメントのタイトル。メタデータに表示されます。
  • pageSize: PDF のサイズを定義します (A4、レターなど)。 pageWidth と pageHeight を使用して明示的にサイズを設定することもできます。
  • margin: ドキュメントに均一のマージンを設定するか、より詳細な制御のために marginTop や marginLeft などを使用します。
  • landscape: 横向きの場合は true、縦向きの場合は false に設定します。
  • css: ドキュメントのコンテンツのスタイルを設定するためにカスタム CSS を追加できます。
  • ヘッダーとフッター: pageNumber、totalPages、および date のプレースホルダーを使用してヘッダーとフッターを追加できます。

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 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート