PDFツール

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

公開済み 2023年5月16日

共有:

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

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

React プロジェクトを作成して設定する
ライブラリをダウンロードして、npmを使用してReactでHTMLをPDFに変換します
React-pdf/rendererから必要なモジュールをインポートする
インポートしたモジュールを使用してHTMLページを構成する
利用する PDFダウンロードリンク HTMLをPDFに変換するためのReact-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アプリケーションの開始方法

進む前に、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

ReactでHTMLをPDFに変換する方法 (開発者チュートリアル): 図1 - create react app

ステップ 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 - localhostで実行中のライブ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

以下のように生成されたPDFファイルをダウンロードするために、React-pdf の PDFDownloadLink コンポーネントを使用できます:

    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

App.cssにカスタムUI用の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 を開きます。

ReactでHTMLをPDFに変換する方法（開発者向けチュートリアル）：図5 - ローカルホストで動作しているReact PDF

ダウンロードボタンをクリックすると、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-pdfライブラリを使用してReactでHTMLをPDFに変換するプロセスについて説明しました。私たちはPDF生成のための人気のあるライブラリ、React-pdf を使用してPDFファイルを作成およびスタイル設定する方法、そしてより複雑なPDFドキュメントを生成するための追加オプションについて議論しました。

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

IronPDFは無料試用版, お客様がライブラリをテストし、ご購入前にニーズに合っているかどうかを判断できるようにするためのものです。試用期間後、IronPDFライセンス購入$749から始めて、優先サポートと更新を含みます。さらに、IronPDFは以下のような他の言語にも対応しています。C# .NET, Java、およびPython. IronPDFライブラリをダウンロードするIronPDF for Node.jsで始めるそしてお試しください。

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