PDFツール

ReactでHTMLをPDFに変換する方法 (デベロッパーチュートリアル)

リーガン・パン

2023年5月16日

共有:

ReactでHTMLをPDFに変換することは、多くのWebアプリケーションにとって必要不可欠な機能となっています。請求システムやレポート生成器を構築している場合でも、普遍的に受け入れられる形式で情報を共有する必要があるだけの場合でも、PDFの生成は重要です。この記事では、人気のライブラリを使用して、Reactアプリケーション内でHTMLをPDFに変換することで、PDFファイルの作成とスタイル設定方法を探ります。

リアクトでHTMLをPDFに変換する方法

Reactプロジェクトの作成と構成
ReactでHTMLをPDFに変換するためのライブラリーをnpmでダウンロード
React-pdf/rendererから必要なモジュールをインポートする
インポートしたモジュールを使用してHTMLページを構成する
React-pdfのPDFDownloadLinkモジュールを利用してHTMLをPDFに変換します

PDF生成で人気のライブラリ

HTMLをPDFに変換するプロセスに入る前に、ReactアプリケーションでPDF生成に使用できるいくつかの人気のライブラリについて話しましょう。

React-pdf: ReactアプリケーションでPDFドキュメントを作成するための強力なライブラリ。さまざまなスタイリングオプションをサポートしており、複雑な多ページPDFを簡単に作成できます。
jsPDF: PDFファイルを即座に生成するために広く使用されているJavaScriptライブラリです。それは、テキストのスタイリング、画像の埋め込み、その他多くの機能を提供します。
html2canvas: このライブラリを使用すると、HTML要素のスクリーンショットをキャプチャしてキャンバスオブジェクトに変換できます。そして、このオブジェクトを他のライブラリ（例えばjsPDF）を使ってPDFに変換することが可能です。

ReactでHTMLをPDFに変換するための前提条件

Reactとそのエコシステムへの精通

HTMLからPDFへの変換に取り組む前に、Reactの確実な理解を持つことが重要です。これには、JSX、ステート管理、コンポーネントライフサイクル、およびフックの知識が含まれます。

HTML、CSS、およびJavaScriptの理解

React-pdf ライブラリを扱うには、HTML、CSS、および JavaScript の強固な基礎が不可欠です。これには、HTML要素と属性、CSSスタイリングとセレクタ、および変数、関数、ループなどのJavaScriptの基本が含まれます。

Reactアプリケーションの開始方法

HTMLをPDFに変換する前に、人気のあるcreate-react-app CLIツールを使って、新しいReactアプリケーションを作成する方法を簡単に確認しておきましょう。これは、PDF生成の例の基盤として機能します。

ステップ 1: Node.js をインストール

Node.jsがあなたのマシンにインストールされていることを確認してください。公式Node.jsウェブサイトから最新バージョンのNode.jsをダウンロードできます。

ステップ 2: create-react-app をインストール

create-react-appは、Reactアプリケーションを生成するために広く使用されているCLIツールです。以下のコマンドを使用してグローバルにインストールします:

npm install -g create-react-app

HTMLをPDFに変換する方法（React開発者向けチュートリアル）：図1 - Reactアプリを作成する

ステップ 3 新しい React アプリケーションを作成する

これでcreate-react-appがインストールされたので、次のコマンドで新しいReactアプリケーションを作成できます。

create-react-app my-pdf-app

ReactでHTMLをPDFに変換する方法（開発者向けチュートリアル）：図2 - 新しいReactアプリの作成

このコマンドはmy-pdf-appというフォルダーに新しいReactアプリケーションを生成します。新しく作成されたディレクトリに移動します:

cd my-pdf-app

ステップ4 開発サーバーを起動する

開発サーバーを起動して新しいReactアプリケーションを実行するには、以下のコマンドを実行してください:

npm start

ReactでHTMLをPDFに変換する方法（開発者チュートリアル）：図3 - ローカルホストで実行されているライブReactアプリ

ステップ5 PDF生成の実装

Reactアプリケーションをセットアップしたので、この記事の前のセクションに記載されている手順に従って、React-pdfのような人気のライブラリを使用してHTML to PDF React変換を実装できます。

React-pdfライブラリの紹介

React-pdfはReactアプリケーション専用に設計された人気のライブラリであり、Reactエコシステムとのスムーズな統合を提供します。その主な機能には、インラインおよび外部CSSのサポート、複数ページのPDF生成、高度なスタイリング、サーバーサイドレンダリング（SSR）との互換性が含まれます。

React-pdfでPDFファイルを作成

このセクションでは、React アプリケーションで PDF ファイルを作成するためのReact-pdfの使用に焦点を当てます。まず、React-pdfパッケージをインストールする必要があります：

npm install --save @React-pdf/renderer

ReactでHTMLをPDFに変換する方法（開発者向けチュートリアル）：図4 - React-pdfパッケージ

インストールが完了したら、新しいReactコンポーネントを作成してPDFドキュメントの構造を定義できます。

    import React from "react";
    import {
      Document,
      Page,
      Text,
      View,
      StyleSheet,
      Image,
      Font,
    } from "@React-pdf/renderer";
    const invoiceData = {
      sender: {
        name: "John Doe",
        address: "123 Main Street",
        city: "New York",
        state: "NY",
        zip: "10001",
      },
      recipient: {
        name: "Jane Smith",
        address: "456 Elm Street",
        city: "San Francisco",
        state: "CA",
        zip: "94107",
      },
      items: [
        { description: "Item 1", quantity: 2, unitPrice: 10 },
        { description: "Item 2", quantity: 3, unitPrice: 15 },
        { description: "Item 3", quantity: 1, unitPrice: 20 },
      ],
      invoiceNumber: "INV-123456",
      date: "April 26, 2023",
    };
    const styles = StyleSheet.create({
      page: {
        backgroundColor: "#FFF",
        padding: 30,
      },
      header: {
        fontSize: 24,
        textAlign: "center",
        marginBottom: 30,
      },
      sender: {
        marginBottom: 20,
      },
      recipient: {
        marginBottom: 30,
      },
      addressLine: {
        fontSize: 12,
        marginBottom: 2,
      },
      itemsTable: {
        display: "table",
        width: "100%",
        borderStyle: "solid",
        borderWidth: 1,
        borderRightWidth: 0,
        borderBottomWidth: 0,
      },
      tableRow: {
        margin: "auto",
        flexDirection: "row",
      },
      tableColHeader: {
        width: "25%",
        borderStyle: "solid",
        borderWidth: 1,
        borderLeftWidth: 0,
        borderTopWidth: 0,
        backgroundColor: "#F0F0F0",
      },
      tableCol: {
        width: "25%",
        borderStyle: "solid",
        borderWidth: 1,
        borderLeftWidth: 0,
        borderTopWidth: 0,
      },
      tableCell: {
        fontSize: 12,
        textAlign: "center",
        padding: 5,
      },
      total: {
        marginTop: 20,
        textAlign: "right",
      },
      totalLabel: {
        fontSize: 14,
        fontWeight: "bold",
      },
      totalValue: {
        fontSize: 14,
      },
    });

    const InvoiceDocument = () => {
      const totalAmount = invoiceData.items.reduce(
        (total, item) => total + item.quantity * item.unitPrice,
        0
      );

      return (

            Invoice

              {invoiceData.sender.name}
              {invoiceData.sender.address}

                {invoiceData.sender.city}, {invoiceData.sender.state}{" "}
                {invoiceData.sender.zip}

              {invoiceData.recipient.name}

                {invoiceData.recipient.address}

                {invoiceData.recipient.city}, {invoiceData.recipient.state}{" "}
                {invoiceData.recipient.zip}

                  Description

                  Quantity

                  Unit Price

                  Amount

              {invoiceData.items.map((item, index) => (

                    {item.description}

                    {item.quantity}

                      {item.unitPrice.toFixed(2)}

                      {(item.quantity * item.unitPrice).toFixed(2)}

              ))}

              Total:
              ${totalAmount.toFixed(2)}

      );
    };

    export default InvoiceDocument;

    import React from "react";
    import {
      Document,
      Page,
      Text,
      View,
      StyleSheet,
      Image,
      Font,
    } from "@React-pdf/renderer";
    const invoiceData = {
      sender: {
        name: "John Doe",
        address: "123 Main Street",
        city: "New York",
        state: "NY",
        zip: "10001",
      },
      recipient: {
        name: "Jane Smith",
        address: "456 Elm Street",
        city: "San Francisco",
        state: "CA",
        zip: "94107",
      },
      items: [
        { description: "Item 1", quantity: 2, unitPrice: 10 },
        { description: "Item 2", quantity: 3, unitPrice: 15 },
        { description: "Item 3", quantity: 1, unitPrice: 20 },
      ],
      invoiceNumber: "INV-123456",
      date: "April 26, 2023",
    };
    const styles = StyleSheet.create({
      page: {
        backgroundColor: "#FFF",
        padding: 30,
      },
      header: {
        fontSize: 24,
        textAlign: "center",
        marginBottom: 30,
      },
      sender: {
        marginBottom: 20,
      },
      recipient: {
        marginBottom: 30,
      },
      addressLine: {
        fontSize: 12,
        marginBottom: 2,
      },
      itemsTable: {
        display: "table",
        width: "100%",
        borderStyle: "solid",
        borderWidth: 1,
        borderRightWidth: 0,
        borderBottomWidth: 0,
      },
      tableRow: {
        margin: "auto",
        flexDirection: "row",
      },
      tableColHeader: {
        width: "25%",
        borderStyle: "solid",
        borderWidth: 1,
        borderLeftWidth: 0,
        borderTopWidth: 0,
        backgroundColor: "#F0F0F0",
      },
      tableCol: {
        width: "25%",
        borderStyle: "solid",
        borderWidth: 1,
        borderLeftWidth: 0,
        borderTopWidth: 0,
      },
      tableCell: {
        fontSize: 12,
        textAlign: "center",
        padding: 5,
      },
      total: {
        marginTop: 20,
        textAlign: "right",
      },
      totalLabel: {
        fontSize: 14,
        fontWeight: "bold",
      },
      totalValue: {
        fontSize: 14,
      },
    });

    const InvoiceDocument = () => {
      const totalAmount = invoiceData.items.reduce(
        (total, item) => total + item.quantity * item.unitPrice,
        0
      );

      return (

            Invoice

              {invoiceData.sender.name}
              {invoiceData.sender.address}

                {invoiceData.sender.city}, {invoiceData.sender.state}{" "}
                {invoiceData.sender.zip}

              {invoiceData.recipient.name}

                {invoiceData.recipient.address}

                {invoiceData.recipient.city}, {invoiceData.recipient.state}{" "}
                {invoiceData.recipient.zip}

                  Description

                  Quantity

                  Unit Price

                  Amount

              {invoiceData.items.map((item, index) => (

                    {item.description}

                    {item.quantity}

                      {item.unitPrice.toFixed(2)}

                      {(item.quantity * item.unitPrice).toFixed(2)}

              ))}

              Total:
              ${totalAmount.toFixed(2)}

      );
    };

    export default InvoiceDocument;

JAVASCRIPT

これで、React-pdfのPDFDownloadLinkコンポーネントを使用して生成されたPDFファイルをダウンロードできます。

    import React from 'react';
    import { PDFDownloadLink } from '@React-pdf/renderer';
    import InvoiceDocument from './InvoiceDocument';
    import './App.css';

    const App = () => (

          {({ blob, url, loading, error }) =>
            loading ? 'Loading document...' : 'Download Invoice'
          }

    );

    export default App;

    import React from 'react';
    import { PDFDownloadLink } from '@React-pdf/renderer';
    import InvoiceDocument from './InvoiceDocument';
    import './App.css';

    const App = () => (

          {({ blob, url, loading, error }) =>
            loading ? 'Loading document...' : 'Download Invoice'
          }

    );

    export default App;

JAVASCRIPT

次に、カスタムUIのためにApp.cssにCSSスタイルを追加します：


    .app-container {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #d1e8ff;
    }

    .download-button {
      display: inline-block;
      background-color: #5a8fd5;
      color: #fff;
      font-size: 18px;
      font-weight: bold;
      padding: 12px 24px;
      border-radius: 4px;
      text-decoration: none;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .download-button:hover {
      background-color: #3a68b7;
    }

ブラウザでlocalhost:3000を開きます。

HTMLをPDFに変換する方法（開発者チュートリアル）：図5 - React PDFがlocalhostで実行中

ダウンロードボタンをクリックすると、PDFファイルがダウンロードされます。

ReactでHTMLをPDFに変換する方法 (開発者向けチュートリアル): 図 6 - ダウンロードされた請求書

以下にHTMLドキュメントから生成されたPDFファイルの出力を示します:

ReactでHTMLをPDFに変換する方法（開発者チュートリアル）：図7 - ドキュメント出力

PDFファイルのスタイリング

React-pdfライブラリは、CSSに似た幅広いスタイリングオプションをサポートしています。以下は、PDFファイルの外観をカスタマイズするために使用できる一般的なスタイリングプロパティです：

color: テキストの色を設定します。
fontSize: テキストのフォントサイズを設定します。
fontFamily：テキストのフォントファミリーを設定します。
textAlign: テキストの配置を設定します（例： 'left'、 'right'、 'center'、または 'justify'）。
margin: 要素の周りのマージンを設定します。
padding: 要素内の余白を設定します。
border: 要素の周りに枠線を設定します。
backgroundColor: 要素の背景色を設定します。

React開発者向け代替PDFライブラリ

IronPDF for Node.jsは、ReactでHTMLをPDFに変換するための優れた代替手段です。 Iron Softwareによって開発されたこの強力なライブラリは、開発者がNode.jsアプリケーションから直接PDFドキュメントを生成および操作できるようにします。 IronPDFの際立った機能の一つは、PDF生成中にHTMLコンテンツ内のJavaScript実行を処理できることで、動的かつインタラクティブなPDF作成を実現する点です。

Windows、MacOS、Linux、Docker、AzureやAWSのようなクラウドプラットフォームを含む様々なプラットフォームをサポートすることで、IronPDFはクロスプラットフォームの互換性を保証します。ユーザーフレンドリーなAPIにより、開発者はPDF生成および操作を迅速にNode.jsプロジェクトに統合することができます。

Reactは、ユーザーインターフェースを構築するためのJavaScriptライブラリであり、IronPDFはNode.js用に作られているため、Node.js APIを利用してIronPDFをReactアプリケーションに統合できます。

以下は、ReactでIronPDFを使用する方法の概要です:

IronPDFのインストール：npmまたはyarnを使用して、ReactプロジェクトにIronPDFをインストールすることができます。

  npm install @ironsoftware/ironpdf

Reactコンポーネントとの統合：IronPDFを利用してPDFを生成および操作するReactコンポーネントを作成することができます。例えば、IronPDFのAPIを使用してHTMLコンテンツを入力として取り込み、PDFに変換するコンポーネントを持つことができます。

  import React from 'react';
  import { PdfDocument } from '@ironsoftware/ironpdf';

  const HTMLToPDFComponent = () => {
      const convertHTMLToPDF = async (htmlContent) => {
          try {
              const pdf = await PdfDocument.fromHtml(htmlContent);
              await pdf.saveAs('generated_pdf.pdf');
              alert('PDF generated successfully!');
          } catch (error) {
              console.error('Error generating PDF:', error);
          }
      };

      return (
          <div>
              {/* Input HTML content */}
              <textarea onChange={(e) => convertHTMLToPDF(e.target.value)} />
          </div>
      );
  };

  export default HTMLToPDFComponent;

  import React from 'react';
  import { PdfDocument } from '@ironsoftware/ironpdf';

  const HTMLToPDFComponent = () => {
      const convertHTMLToPDF = async (htmlContent) => {
          try {
              const pdf = await PdfDocument.fromHtml(htmlContent);
              await pdf.saveAs('generated_pdf.pdf');
              alert('PDF generated successfully!');
          } catch (error) {
              console.error('Error generating PDF:', error);
          }
      };

      return (
          <div>
              {/* Input HTML content */}
              <textarea onChange={(e) => convertHTMLToPDF(e.target.value)} />
          </div>
      );
  };

  export default HTMLToPDFComponent;

JAVASCRIPT

PDF生成の処理: Reactコンポーネント内でIronPDFの機能を利用してPDFの生成、操作、および保存を行います。 IronPDFのメソッドを使用して、HTML文字列、URL、または画像をPDFに変換できます。
PDF のレンダリング: IronPDF を使用して PDF を生成したら、適切なコンポーネントやライブラリを使用して、React アプリケーション内で PDF ドキュメントを表示することができます。

  import React from 'react';

  const PDFViewerComponent = () => {
      return (
          <div>
              {/* Render PDF using appropriate component or library */}
              <iframe src="generated_pdf.pdf" width="100%" height="600px" title="PDF Viewer" />
          </div>
      );
  };

  export default PDFViewerComponent;

  import React from 'react';

  const PDFViewerComponent = () => {
      return (
          <div>
              {/* Render PDF using appropriate component or library */}
              <iframe src="generated_pdf.pdf" width="100%" height="600px" title="PDF Viewer" />
          </div>
      );
  };

  export default PDFViewerComponent;

JAVASCRIPT

IronPDFを使用すると、開発者はさまざまなソースからプロフェッショナル品質のPDFドキュメントを効率的に生成し、特定の要件に合わせてカスタマイズし、PDF生成機能をシームレスに.NETアプリケーションに統合することができます。 IronPDFは、CSS、JavaScript、カスタムフォントなどの高度な機能もサポートしており、生成されたPDFファイルがアプリケーションのデザインおよび要件に一致することを保証します。

結論

この記事では、ReactでHTMLをPDFに変換するプロセスについて、React-pdfライブラリを使用して説明しました。私たちは、PDF生成のための人気ライブラリについて、React-pdfを使用してPDFファイルを作成およびスタイル設定する方法、そしてより複雑なPDFドキュメントを生成するための追加オプションについて議論しました。

このガイドに従うことで、ReactアプリケーションでPDFファイルを生成する方法についてしっかりと理解できるはずです。これにより、さまざまなユースケースのニーズを満たす高品質のPDFを生成することが可能になります。

IronPDFは、無料の試用版を提供しており、購入を決定する前にライブラリをテストしてニーズに合っているかどうか判断できます。試用期間終了後、IronPDFのライセンス購入は$749から始まり、優先サポートとアップデートが含まれます。さらに、IronPDFはC# .NET、Java、Pythonなどの他の言語でも利用可能です。 IronPDFライブラリをダウンロードするには、IronPDF for Node.jsから始めてみてください。

リーガン・パン

今すぐエンジニアリングチームとチャット

ソフトウェアエンジニア

レーガンはリーディング大学で電子工学の学士号を取得しました。Iron Softwareに入社する前の仕事では、一つのタスクに集中して取り組んでいました。Iron Softwareでは、営業、技術サポート、製品開発、マーケティングのいずれにおいても広範な業務に携わることが最も楽しいと感じています。彼は、Iron Softwareライブラリを開発者がどのように使用しているかを理解し、その知識を使ってドキュメントを継続的に改善し、製品を開発することを楽しんでいます。

< 以前
JavaScriptでPDFファイルを印刷する方法