メッセージアイコン
  1. IronPDF
  2. IronPDFブログ
  3. Node PDFツール
  4. リアクトPDFジェネレーター
PDFツール

ReactでPDFファイルを作成する方法

公開済み 2023年8月24日
共有:

ReactアプリケーションからPDFドキュメントを作成するチュートリアルへようこそ! このチュートリアルでは、さまざまなライブラリを使用してPDFを生成する方法を探り、人気のjsPDFライブラリを使用してReactコンポーネントから直接PDFファイルを作成する方法を学びます。 それでは、早速始めましょう。!

PDF(ポータブルドキュメントフォーマット)は、レイアウトとフォーマットを保持しながら、ドキュメントを共有および印刷するために広く使用されているファイル形式です。 Reactのウェブ開発者として、請求書、レポート、または販売契約書などのPDFドキュメントをReactアプリケーションから直接生成する必要があるシナリオに遭遇するかもしれません。

React PDF ライブラリを選ぶ

ReactアプリケーションでPDFドキュメントを作成することは、特にこの分野に不慣れな場合には困難な作業となります。 ありがたいことに、このプロセスを大幅に簡素化する複数のサードパーティライブラリが利用可能です。 それぞれのライブラリには独自の機能とユーティリティが備わっており、異なるユースケースに対応しています。 これらのライブラリについてもう少し詳しく見てみましょう。

jsPDF (jsPDF)

jsPDFは、JavaScriptでPDFファイルを生成するためのライブラリです。このライブラリを使用すると、ブラウザ内でPDFを作成、カスタマイズ、保存することができます。jsPDFは、広く使用されている機能豊富なオープンソースのツールであり、クライアントサイドでのPDF生成をシンプルかつ効率的に行えます。

主な特徴:

  • テキストの追加: テキストを指定位置に挿入可能。
  • 画像の追加: 画像をPDFに埋め込むことができる。
  • フォントのカスタマイズ: カスタムフォントの追加および使用が可能。
  • 多様なファイル形式のサポート: JPEG, PNG, SVGなど。

基本的な使い方:

  1. ライブラリのインクルード: 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
    HTML
  2. PDFの生成: 
    const { jsPDF } = window.jspdf;
const doc = new jsPDF();
doc.text("Hello world!", 10, 10);
doc.save("sample.pdf");
    JAVASCRIPT

このように、jsPDFを利用することで簡単にPDFファイルを生成できます。详细な使用法については、公式ドキュメントを参照してください。

jsPDFは、JavaScriptからPDFファイルを生成するために開発者の間で広く人気のあるライブラリです。 その主なセールスポイントの一つは、そのシンプルさです。 その構文と使用方法は非常に簡単で、HTMLコンテンツをすぐにPDFファイルに変換することができます。

PDFのフォーマットとレイアウトを制御することができ、フォントサイズや色の変更からページの向きやサイズの調整まで行えます。jsPDFは、ブラウザおよびサーバー環境の両方で機能する堅牢なソリューションであり、幅広いJavaScriptアプリケーションに適した優れた選択肢です。

pdfmake

pdfmakeは、純粋なJavaScriptで実装されたクライアント/サーバーサイドのPDF印刷ソリューションとして際立っています。 このライブラリは、総合的なAPIと柔軟なレイアウトオプションのおかげで、より複雑なPDFを作成するための優れた選択肢です。 pdfmakeを使用すると、シンプルなJavaScriptオブジェクトを使用してドキュメントの内容と構造を定義し、それを有効なPDFドキュメントに変換できます。

React-PDF (リアクト-PDF)

React-PDFは、Reactコンポーネントを使用してPDFファイルを作成するための強力な機能を提供するユニークなライブラリです。 JavaScriptオブジェクトでドキュメント構造を手動で作成する代わりに、再利用可能なコンポーネントとプロップを使用して、通常のReactアプリケーションを構築するのと同じようにPDFを作成できます。 IronPDFのウェブサイトにはReact-PDFライブラリを使ったPDF作成のチュートリアル.

なぜjsPDFを選ぶのか？

3つのライブラリすべてがReactでPDFドキュメントを生成するための強力なツールを提供しますが、このチュートリアルでは、シンプルさ、柔軟性、そしてコミュニティでの広範な採用によってjsPDFを使用します。 これは初心者にとっての参入障壁を低くし、またその堅牢な機能セットは多くのユースケースに適した選択肢となります。 以下のjsPDFの原則を探求することで、PDFを生成するための堅固な基盤が得られます。プロジェクトの要件に応じて、他のライブラリもより簡単に習得できるようになります。

前提条件

このチュートリアルに進む前に、スムーズに進めるために必要なツールと知識を十分に備えていることを確認することが重要です。 このチュートリアルの前提条件は以下の通りです:

Reactの基本的な理解

まず第一に、特にシングルページアプリケーションを構築するためのユーザーインターフェースを作成するためのポピュラーなJavaScriptライブラリであるReactについての基本的な理解を持っている必要があります。 JSXのような概念に精通している必要があります。(JavaScript XML (ジャバスクリプト XML))コンポーネント、状態、およびプロップス in React.

開発環境

Reactアプリケーションを構築するための開発環境もコンピューター上にセットアップしておくべきです。 これはテキストエディタまたは統合開発環境（IDE）を含みます。(IDE (統合開発環境)). Visual Studio Code、Atom、または Sublime Text といったテキストエディターはすべて良い選択肢です。

Node.js と npm

プロジェクトとその依存関係を管理するために、Node.jsとnpmを使用します。(ノードパッケージマネージャー). Node.jsがコンピューターにインストールされていることを確認してください。 Node.jsは、サーバー上でJavaScriptを実行できるJavaScriptランタイムです。 npmがインストールされているため、プロジェクトに必要なライブラリを管理できます。

以下のターミナルコマンドを実行して、Node.jsおよびnpmがインストールされているかどうかを確認できます:

node -v
npm -v

これらのコマンドは、それぞれのシステムにインストールされているNode.jsとnpmのバージョンを表示します。 以下を日本語に翻訳してください：

インストールされていない場合やバージョンが古い場合は、最新の長期サポート版をダウンロードしてインストールする必要があります。(LTS (長期サポート))Node.jsのバージョンから公式ダウンロードページ.

ステップ1: プロジェクトのセットアップ

それでは、Reactプロジェクトのセットアップを開始しましょう。 ターミナルを開き、プロジェクトを作成したいディレクトリに移動してください。 新しいReactアプリケーションを作成するには、次のコマンドを実行してください:

npx create-react-app pdf-from-react

ReactでPDFファイルを作成する方法: 図1 - 上記のコマンドが進行中の端末のスクリーンショット。

このコマンドは、基本的なReactプロジェクト構造を持つ pdf-from-react という新しいディレクトリを作成します。

次に、プロジェクトディレクトリに移動します:

cd pdf-from-react

では、私たちのコーディングエディタでプロジェクトを開き、実装を進めることができます。

ステップ2: 必要な依存関係の追加

まず、必要なパッケージをインストールする必要があります。 以下のターミナルコマンドを使用して、react、react-dom、@mui/material、および jspdf をインストールします。

npm install jspdf @mui/material @emotion/react @emotion/styled @mui/icons-material

ステップ3: PDF生成機能の構築

ライブラリのインポート

まず、アプリケーションに必要な依存関係をインポートします。 これには、Material-UIライブラリの様々なコンポーネント、PDF生成用のjsPDFライブラリ、そしてスタイリングユーティリティが含まれています。

import React, { useState } from "react";
import "./App.css";
import {
  Button,
  TextField,
  Box,
  Container,
  Typography,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  IconButton,
  Snackbar,
  Alert,
} from "@mui/material";
import Grid from "@mui/material/Grid";
import DeleteIcon from "@mui/icons-material/Delete";
import jsPDF from "jspdf";
import { styled } from "@mui/material/styles";
import { tableCellClasses } from "@mui/material/TableCell";
JAVASCRIPT

スタイル付きコンポーネントの作成

一貫したクロスブラウザ動作をアプリに追加するために、MUIライブラリのstyledユーティリティを使用してStyledTableCellとStyledTableRowを作成しました。

const StyledTableCell = styled(TableCell)(({ theme }) => ({
  [`&.${tableCellClasses.head}`]: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
  },
  [`&.${tableCellClasses.body}`]: {
    fontSize: 14,
  },
}));

const StyledTableRow = styled(TableRow)(({ theme }) => ({
  "&:nth-of-type(odd)": {
    backgroundColor: theme.palette.action.hover,
  },
  "&:last-child td, &:last-child th": {
    border: 0,
  },
}));
JAVASCRIPT

アプリコンポーネントの作成

私たちのアプリケーションの主要コンポーネントは App コンポーネントです。 次の4つの状態変数があります。それぞれ、お客様のデータを追跡するための customerName と customerAddress、請求書内の品目リストを追跡するための items、必要に応じてエラーメッセージを表示するための error です。

function App() {
  // State variables
  const [customerName, setCustomerName] = useState("");
  const [customerAddress, setCustomerAddress] = useState("");
  const [items, setItems] = useState([{ name: "", quantity: "", price: "" }]);
  const [error, setError] = useState(false);
JAVASCRIPT

ユーザー入力の処理

このコードブロックでは、ユーザーとの対話を処理するための関数を定義しました。具体的には、アイテムの詳細を変更する関数、新しいアイテムを追加する関数、およびアイテムを削除する関数です。 handleItemChange 関数は、ユーザーが項目を変更した際に、その項目のプロパティを更新します。 addItem 関数はリストに新しいアイテムを追加します。deleteItem 関数はリストからアイテムを削除します。

const handleItemChange = (index, event) => {
  let newItems = [...items];
  newItems[index][event.target.name] = event.target.value;
  setItems(newItems);
};

const addItem = () => {
  setItems([...items, { name: "", quantity: "", price: "" }]);
};

const deleteItem = (index) => {
  let newItems = [...items];
  newItems.splice(index, 1);
  setItems(newItems);
};
JAVASCRIPT

請求書の生成

以下は、generateInvoice 関数のコードです：

// Generate invoice
const generateInvoice = () => {
  // Validate the input fields
  if (
    !customerName 

    !customerAddress 

    items.some((item) => !item.name 
 !item.quantity 
 !item.price)
  ) {
    setError(true);
    return;
  }

  // Create a new jsPDF instance
  let doc = new jsPDF("p", "pt");

  // Add invoice header
  doc.setFontSize(24);
  doc.text("Invoice", 40, 60);
  doc.setFontSize(10);
  doc.text("Invoice Number: 123456", 40, 90);
  doc.text("Date: " + new Date().toDateString(), 40, 110);
  doc.text(`Customer Name: ${customerName}`, 40, 130);
  doc.text(`Customer Address: ${customerAddress}`, 40, 150);

  // Add items section
  doc.setFontSize(14);
  doc.text("Items:", 40, 200);
  doc.line(40, 210, 550, 210);

  // Add item details
  doc.setFontSize(12);
  let yOffset = 240;
  let total = 0;

  items.forEach((item) => {
    let itemTotal = item.quantity * item.price;
    total += itemTotal;

    doc.text(`Item: ${item.name}`, 40, yOffset);
    doc.text(`Quantity: ${item.quantity}`, 200, yOffset);
    doc.text(`Price: $${item.price}`, 300, yOffset);
    doc.text(`Total: $${itemTotal}`, 400, yOffset);

    yOffset += 20;
  });

  // Add total
  doc.line(40, yOffset, 550, yOffset);
  doc.setFontSize(14);
  doc.text(`Total: $${total}`, 400, yOffset + 30);

  // Save the generated PDF as "invoice.pdf"
  doc.save("invoice.pdf");

  // Reset error state
  setError(false);
};
JAVASCRIPT

generateInvoice 関数では、最初に入力フィールドの検証を行い、顧客名、顧客住所、および項目の詳細が記入されていることを確認します。 これらのフィールドのいずれかが空の場合、error状態をtrueに設定し、すぐに戻ります。

次に、new jsPDFを呼び出してjsPDFの新しいインスタンスを作成します。(「p」、「pt」). 最初の引数"p"はページの向きを縦に指定し、2番目の引数"pt"`は計測単位をポイントに指定します。

次に、PDFドキュメントにコンテンツを追加し始めます。 フォントサイズは doc.setFontSize を使用して設定し、ページ上の特定の座標にテキストを追加するには doc.text メソッドを使用します。 請求書ヘッダーには、タイトル、請求書番号、日付、顧客名、および顧客住所を含めます。

ヘッダーの後に、「Items」セクションを追加します。フォントサイズを設定し、doc.lineを使用してアイテムをヘッダーから分離するための線を追加します。 次に、items 配列の各アイテムを反復処理し、数量と価格を掛け合わせることで各アイテムの合計価格を計算します。すべてのアイテムの合計を合計したものを total 変数に更新します。

各項目について、doc.text を使用して、項目名、数量、価格、および項目合計をPDFドキュメントに追加します。 各項目ごとに次の行に移動するために、yOffset 変数を増加させます。 最後に、合計金額をアイテムから区別するために線を追加し、ドキュメントの右下に合計金額を追加するためにdoc.textを使用します。

コンテンツを追加した後、doc.saveを使用します。(「invoice.pdf」)生成されたPDFを「invoice.pdf」としてユーザーのコンピュータに保存します。 最後に、以前のバリデーションエラーをクリアするために、error 状態を false にリセットします。

ステップ 4: UIのレンダリング

returnステートメントには、レンダリングプロセスを処理するJSXコードが含まれています。 以下の内容を日本語に翻訳してください：

顧客名と住所の入力フィールド、アイテム詳細を入力するためのテーブル、アイテムを追加し請求書を生成するボタン、そしてバリデーションエラーを表示するエラースナックバーが含まれています。

Material-UIライブラリのコンポーネント、例えばButton、TextField、Box、Container、Typography、Table、TableBody、TableCell、TableContainer、TableHead、TableRow、Paper、IconButton、Snackbar、そしてAlertを使用して基本的なコンポーネントを作成します。 これらのコンポーネントは、フォームフィールド、テーブル、ボタン、エラーメッセージを作成するために使用されます。

return (
  <Container maxWidth="md">
    <Box sx={{ my: 4 }}>
      <Typography variant="h3" component="h1" gutterBottom>
        Create Invoice
      </Typography>

      {/* Customer Name and Address fields */}
      <Grid container spacing={3}>
        <Grid item xs={6}>
          <TextField
            label="Customer Name"
            fullWidth
            margin="normal"
            value={customerName}
            onChange={(e) => setCustomerName(e.target.value)}
          />
        </Grid>
        <Grid item xs={6}>
          <TextField
            label="Customer Address"
            fullWidth
            margin="normal"
            value={customerAddress}
            onChange={(e) => setCustomerAddress(e.target.value)}
          />
        </Grid>
      </Grid>

      {/* Items table */}
      <TableContainer component={Paper}>
        <Table sx={{ minWidth: 700 }} aria-label="invoice table">
          <TableHead>
            <TableRow>
              <StyledTableCell>Item Name</StyledTableCell>
              <StyledTableCell align="left">Quantity</StyledTableCell>
              <StyledTableCell align="left">Price</StyledTableCell>
              <StyledTableCell align="left">Action</StyledTableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {items.map((item, index) => (
              <StyledTableRow key={index}>
                <StyledTableCell component="th" scope="row">
                  <TextField
                    fullWidth
                    value={item.name}
                    onChange={(event) => handleItemChange(index, event)}
                    name="name"
                  />
                </StyledTableCell>
                <StyledTableCell align="right">
                  <TextField
                    fullWidth
                    value={item.quantity}
                    onChange={(event) => handleItemChange(index, event)}
                    name="quantity"
                  />
                </StyledTableCell>
                <StyledTableCell align="right">
                  <TextField
                    fullWidth
                    value={item.price}
                    onChange={(event) => handleItemChange(index, event)}
                    name="price"
                  />
                </StyledTableCell>
                <StyledTableCell align="right">
                  <IconButton onClick={() => deleteItem(index)}>
                    <DeleteIcon />
                  </IconButton>
                </StyledTableCell>
              </StyledTableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>

      {/* Buttons */}
      <Box mt={2} display="flex" gap={2}>
        <Button variant="contained" onClick={addItem}>
          Add Item
        </Button>
        <Button variant="outlined" color="success" onClick={generateInvoice}>
          Generate Invoice
        </Button>
      </Box>
    </Box>

    {/* Error Snackbar */}
    <Snackbar
      open={error}
      autoHideDuration={6000}
      onClose={() => setError(false)}
      anchorOrigin={{ vertical: "top", horizontal: "right" }}
    >
      <Alert onClose={() => setError(false)} severity="error">
        Please fill in all required fields.
      </Alert>
    </Snackbar>
  </Container>
);
JAVASCRIPT

App.js と App.css の完全なコード

以下は、プロジェクトにコピー＆ペーストできる完全なApp.jsコードです：

import React, { useState } from "react";
import "./App.css";
import {
  Button,
  TextField,
  Box,
  Container,
  Typography,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  IconButton,
  Snackbar,
  Alert,
} from "@mui/material";
import Grid from "@mui/material/Grid";
import DeleteIcon from "@mui/icons-material/Delete";
import jsPDF from "jspdf";
import { styled } from "@mui/material/styles";
import { tableCellClasses } from "@mui/material/TableCell";

const StyledTableCell = styled(TableCell)(({ theme }) => ({
  [`&.${tableCellClasses.head}`]: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
  },
  [`&.${tableCellClasses.body}`]: {
    fontSize: 14,
  },
}));

const StyledTableRow = styled(TableRow)(({ theme }) => ({
  "&:nth-of-type(odd)": {
    backgroundColor: theme.palette.action.hover,
  },
  "&:last-child td, &:last-child th": {
    border: 0,
  },
}));

function App() {
  // State variables
  const [customerName, setCustomerName] = useState("");
  const [customerAddress, setCustomerAddress] = useState("");
  const [items, setItems] = useState([{ name: "", quantity: "", price: "" }]);
  const [error, setError] = useState(false);

  // Event handler for item changes
  const handleItemChange = (index, event) => {
    let newItems = [...items];
    newItems[index][event.target.name] = event.target.value;
    setItems(newItems);
  };

  // Add new item to the list
  const addItem = () => {
    setItems([...items, { name: "", quantity: "", price: "" }]);
  };

  // Delete an item from the list
  const deleteItem = (index) => {
    let newItems = [...items];
    newItems.splice(index, 1);
    setItems(newItems);
  };

  // Generate invoice
  const generateInvoice = () => {
    // Validate the input fields
    if (
      !customerName 

      !customerAddress 

      items.some((item) => !item.name 
 !item.quantity 
 !item.price)
    ) {
      setError(true);
      return;
    }

    // Create a new jsPDF instance
    let doc = new jsPDF("p", "pt");

    // Add invoice header
    doc.setFontSize(24);
    doc.text("Invoice", 40, 60);
    doc.setFontSize(10);
    doc.text("Invoice Number: 123456", 40, 90);
    doc.text("Date: " + new Date().toDateString(), 40, 110);
    doc.text(`Customer Name: ${customerName}`, 40, 130);
    doc.text(`Customer Address: ${customerAddress}`, 40, 150);

    // Add items section
    doc.setFontSize(14);
    doc.text("Items:", 40, 200);
    doc.line(40, 210, 550, 210);

    // Add item details
    doc.setFontSize(12);
    let yOffset = 240;
    let total = 0;

    items.forEach((item) => {
      let itemTotal = item.quantity * item.price;
      total += itemTotal;

      doc.text(`Item: ${item.name}`, 40, yOffset);
      doc.text(`Quantity: ${item.quantity}`, 200, yOffset);
      doc.text(`Price: $${item.price}`, 300, yOffset);
      doc.text(`Total: $${itemTotal}`, 400, yOffset);

      yOffset += 20;
    });

    // Add total
    doc.line(40, yOffset, 550, yOffset);
    doc.setFontSize(14);
    doc.text(`Total: $${total}`, 400, yOffset + 30);

    // Save the generated PDF as "invoice.pdf"
    doc.save("invoice.pdf");

    // Reset error state
    setError(false);
  };

  return (
    <Container maxWidth="md">
      <Box sx={{ my: 4 }}>
        <Typography variant="h3" component="h1" gutterBottom>
          Create Invoice
        </Typography>

        {/* Customer Name and Address fields */}
        <Grid container spacing={3}>
          <Grid item xs={6}>
            <TextField
              label="Customer Name"
              fullWidth
              margin="normal"
              value={customerName}
              onChange={(e) => setCustomerName(e.target.value)}
            />
          </Grid>
          <Grid item xs={6}>
            <TextField
              label="Customer Address"
              fullWidth
              margin="normal"
              value={customerAddress}
              onChange={(e) => setCustomerAddress(e.target.value)}
            />
          </Grid>
        </Grid>

        {/* Items table */}
        <TableContainer component={Paper}>
          <Table sx={{ minWidth: 700 }} aria-label="invoice table">
            <TableHead>
              <TableRow>
                <StyledTableCell>Item Name</StyledTableCell>
                <StyledTableCell align="left">Quantity</StyledTableCell>
                <StyledTableCell align="left">Price</StyledTableCell>
                <StyledTableCell align="left">Action</StyledTableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {items.map((item, index) => (
                <StyledTableRow key={index}>
                  <StyledTableCell component="th" scope="row">
                    <TextField
                      fullWidth
                      value={item.name}
                      onChange={(event) => handleItemChange(index, event)}
                      name="name"
                    />
                  </StyledTableCell>
                  <StyledTableCell align="right">
                    <TextField
                      fullWidth
                      value={item.quantity}
                      onChange={(event) => handleItemChange(index, event)}
                      name="quantity"
                    />
                  </StyledTableCell>
                  <StyledTableCell align="right">
                    <TextField
                      fullWidth
                      value={item.price}
                      onChange={(event) => handleItemChange(index, event)}
                      name="price"
                    />
                  </StyledTableCell>
                  <StyledTableCell align="right">
                    <IconButton onClick={() => deleteItem(index)}>
                      <DeleteIcon />
                    </IconButton>
                  </StyledTableCell>
                </StyledTableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>

        {/* Buttons */}
        <Box mt={2} display="flex" gap={2}>
          <Button variant="contained" onClick={addItem}>
            Add Item
          </Button>
          <Button variant="outlined" color="success" onClick={generateInvoice}>
            Generate Invoice
          </Button>
        </Box>
      </Box>

      {/* Error Snackbar */}
      <Snackbar
        open={error}
        autoHideDuration={6000}
        onClose={() => setError(false)}
        anchorOrigin={{ vertical: "top", horizontal: "right" }}
      >
        <Alert onClose={() => setError(false)} severity="error">
          Please fill in all required fields.
        </Alert>
      </Snackbar>
    </Container>
  );
}
export default App;
JAVASCRIPT

以下は App.css コードです：

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  /* This is the weight for bold in Poppins */
  color: #FF6347;
  /* This is the color Tomato. Replace with your preferred color */
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: #E9F8F4;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

ステップ 5: アプリケーションのテスト

PDF生成機能をテストするには、ターミナルで以下のコマンドを実行してください:

npm start

これにより開発サーバーが起動し、http://localhost:3000でブラウザからアプリケーションを閲覧できます。

ReactでPDFファイルを作成する方法 - 図2: 初期状態の未入力フィールドが表示された完了した請求書アプリケーション。

入力フィールドに顧客名、住所、商品詳細を入力し、「請求書を生成」ボタンをクリックしてください。 PDFファイルはコンピューターにダウンロードされ、生成された請求書の全ページビューを開くことができます。

ReactでPDFファイルを作成する方法 - 図3: 異なるアイテム、数量、価格で三つの行アイテムが入力されたアプリケーション。

「請求書を生成」ボタンをクリックすると、PDFファイルが生成されます。

ReactでPDFファイルを作成する方法 - 図4: 生成されたPDF。

任意の空のフィールドでPDFを生成しようとすると、右上隅にエラーメッセージが表示されます。

リアクトでPDFファイルを作成する方法 - 図5: すべてのフィールドが入力されていないため、エラーメッセージが表示されています。

IronPDF - Node.js PDFライブラリ

Node.js 用 IronPDFは、正確性、使いやすさ、および速度に優れた包括的なNode.js PDFライブラリです。 ReactでHTML、URL、および画像から直接PDFを生成、編集、およびフォーマットするための豊富な機能を提供します。 Windows、MacOS、Linux、Docker、AzureやAWSのようなクラウドプラットフォームを含む様々なプラットフォームをサポートすることで、IronPDFはクロスプラットフォームの互換性を保証します。 ユーザーフレンドリーなAPIにより、開発者はPDF生成および操作を迅速にNode.jsプロジェクトに統合することができます。

IronPDF Node.jsの特筆すべき機能には、ピクセルパーフェクトなレンダリング、豊富なフォーマットオプション、PDFのマージや分割、注釈の追加、PDFフォームの作成などの高度な編集機能が含まれます。

以下は、PDFドキュメントをHTMLファイル, HTML文字列、およびURL:

import { PdfDocument } from "@ironsoftware/ironpdf";

(async () => {
    const pdfFromUrl = await PdfDocument.fromUrl("https://getbootstrap.com/");
    await pdfFromUrl.saveAs("website.pdf");

    const pdfFromHtmlFile = await PdfDocument.fromHtml("design.html");
    await pdfFromHtmlFile.saveAs("markup.pdf");

    const pdfFromHtmlString = await PdfDocument.fromHtml("<p>Hello World</p>");
    await pdfFromHtmlString.saveAs("markup_with_assets.pdf");
})();
JAVASCRIPT

PDF関連の作業のより多くのコード例については、こちらをご覧くださいIronPDFコード例ページ.

結論

結論として、ReactアプリケーションでPDFを作成することは恐れる必要はありません。 適切なツールと明確な理解があれば、美しく構造化されたPDFドキュメントを簡単に生成することができます。 私たちは、jsPDF、pdfmake、React-PDFなどのさまざまなライブラリを調査しました。それぞれ異なる強みとユニークな機能を持っています。

IronPDFのJavaScriptフレームワークおよびライブラリのためのシンプルな統合プロセスにより、優れたドキュメント、そして応答性の高いテクニカルサポートにより、開発者はすぐに利用を開始でき、Node.js アプリケーションでプロフェッショナルなクオリティのPDFを生成するための最高の選択肢となります。

IronPDFは全機能の無料トライアル. 他の言語にも対応しています。C# .NET, Java、およびPython. ウェブサイトに訪問してくださいIronPDFのウェブサイト詳細については。

< 以前
JavaScript PDFエディタ（開発者向けチュートリアル）
次へ >
JavaScriptでPDFファイルを作成する方法

npmでインストール

バージョン:2024.11

> npm i @ironsoftware/ironpdf

問題を報告

準備はできましたか？ バージョン: 2024.11 新発売

無料のnpmインストール ライセンスを表示 >
無料トライアルを開始
Curved White Arrow related to ReactでPDFファイルを作成する方法

完全に機能する製品、キーを即座に取得