React で jsPDF を使用して JSON データから PDF を作成する方法

この記事では、JSON データから JS/React で PDF を作成する方法を説明します。

開発者として、私たちはアプリケーション内に PDF 生成を統合する必要があります。そこで、この記事では、jspdf を使用した PDF の作成について説明します。

それでは、始めましょう。

この記事では特に React 環境を使用します。あなたは JavaScript/React に精通していて、すでに React 環境をセットアップしていると思います

本題に入る前に、PDF を生成するためのサンプル データが必要です。このデータを生成するメソッドを作成します。

const generateUsers = (count) => {
    const users = [];

    for (let i = 1; i <= count; i++) {
      const user = {
        id: i,
        firstName: `firstName_${i}`,
        lastName: `lastName_${i}`,
        email: `email_${i}@example.com`,
        address: [
          `Street ${i + 1}, Address Line 1`,
          `District ${(i % 7) + 1}, City_${i}`,
        ],
      };
      users.push(user);
    }
    return users;
  };

次に、いくつかの npm パッケージ jspdf と jspdf-autotable をインストールする必要があります。

jsPDF は PDF の作成を担当し、jsPDF-AutoTable は PDF 内のデータを表形式で表示するために使用されます。

次のコマンドを使用して両方のパッケージをインストールできます。

npm i jspdf-autotable jspdf

ここで、PDF の作成を処理するメソッドを開発します。汎用のgeneratePDFメソッドを作成しますので、必要な場所でどこでも使用できます。

1.関数定義

関数generatePDFは、オブジェクトの配列(PDFに含めるJSONデータ)であることが期待されるデータを引数として受け取ります。

export const generatePDF = (data) => {

2. PDF ドキュメントのセットアップ
新しい jsPDF インスタンスは次のオプションを使用して作成されます:

• 「l」は横向きを表します。
• 「pt」は測定単位 (ポイント) です。
• 用紙サイズは「a3」です。

const doc = new jsPDF("l", "pt", "a3");

// if you want to use custom dimensions
// width,height

const doc = new jsPDF("l", "pt", [3000,1000]);

3. PDF にタイトルを追加

• フォント サイズを 16 ポイントに設定します。
• ページの上部 (y 位置 30) に中央揃えのタイトル「JSON Data PDF」を追加します。

doc.setFontSize(16);
doc.text("JSON Data PDF", doc.internal.pageSize.getWidth() / 2, 30, {
    align: "center",
});

4.テーブルヘッダーを抽出しています

• データ内の最初のオブジェクトからキーを抽出し、テーブルの列ヘッダーとして使用します。
• データには少なくとも 1 つのオブジェクトがあり、すべてのオブジェクトに同様のキーがあると仮定します。

const tableColumnHeaders = Object.keys(data[0]);

5.テーブル行のフォーマット

データ内の各オブジェクトを反復処理して、新しい配列 (tableRows) を作成します。

• 各エントリはテーブルの行に対応します。
• 各セルの値が配列の場合、要素はカンマで結合されます。それ以外の場合は、値をそのまま追加します。

const tableRows = data.map((row) =>
    Object.keys(row).map((key) => {
        const value = row[key];
        if (Array.isArray(value)) {
            return value.join(", ");
        }
        return value;
    })
);

6. PDF への表の追加

次のオプションを使用してテーブルを構成します:

• startY: 50 テーブルをページの上部から 50 ポイント下に配置します。
• head はテーブルのヘッダー行として tableColumnHeaders を使用します。
• body には tableRows が設定され、データを行ごとに表示します。
• margin はテーブルの周囲の間隔を指定します。
• スタイルは、セルのフォント サイズ、パディング、垂直方向の配置を調整します。
• headStyles はヘッダー行のスタイルを設定します: 青色の背景、白色のテキスト、12 ポイントのフォント。
• alterRowStyles は、交互の行に明るい灰色の背景を追加します。
• columnStyles は列幅を自動的に設定しようとします。
• テーマ: 「ストライプ」は、テーブルにストライプのテーマを適用します。

const generateUsers = (count) => {
    const users = [];

    for (let i = 1; i <= count; i++) {
      const user = {
        id: i,
        firstName: `firstName_${i}`,
        lastName: `lastName_${i}`,
        email: `email_${i}@example.com`,
        address: [
          `Street ${i + 1}, Address Line 1`,
          `District ${(i % 7) + 1}, City_${i}`,
        ],
      };
      users.push(user);
    }
    return users;
  };

7. PDF の保存
PDF ファイルを「JS-pdf.pdf」というファイル名で保存します。

npm i jspdf-autotable jspdf

このコードの完全版は次のとおりです。

export const generatePDF = (data) => {

const doc = new jsPDF("l", "pt", "a3");

// if you want to use custom dimensions
// width,height

const doc = new jsPDF("l", "pt", [3000,1000]);

今のところこれで完了です。楽しんでいただければ幸いです。良い一日をお過ごしください!!!

以上がReact で jsPDF を使用して JSON データから PDF を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。