PDF工具

如何在 React 中創建 PDF 文件

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

Darrius Serrant

更新:7月 28, 2025

歡迎來到如何使用 React 應用程式建立 PDF 文件的教學課程！在本教程中，我們將探索各種用於生成 PDF 的庫，並學習如何使用流行的jsPDF庫直接從 React 元件建立 PDF 文件。那麼，就讓我們開始吧！

PDF（便攜式文檔格式）是一種廣泛使用的文件格式，用於共用和列印文檔，同時保持其佈局和格式。身為 React Web 開發人員，您可能會遇到需要直接從 React 應用程式產生 PDF 文件（例如發票、報告或銷售合約）的場景。

選擇 React PDF 函式庫

在 React 應用程式中建立 PDF 文件可能是一項艱鉅的任務，尤其是對於新手而言。值得慶幸的是，我們可以使用幾個第三方函式庫來大幅簡化這個過程。每個庫都有其獨特的功能和實用工具，以滿足不同的使用場景。讓我們更詳細地了解這些庫。

jsPDF

jsPDF是一個在開發者中廣受歡迎的函式庫，用於從 JavaScript 產生 PDF 檔案。它的主要賣點之一就是它的簡單易用。它的語法和用法非常簡單明了，可以讓你立即將 HTML 內容轉換為 PDF 檔案。

它允許您控制 PDF 的格式和佈局，從更改字體大小和顏色到調整頁面方向和大小。 jsPDF 是一款jsPDF強大的解決方案，可在瀏覽器和伺服器環境中執行，因此是各種 JavaScript 應用程式的理想選擇。

pdfmake

pdfmake是一款以純 JavaScript 編寫的客戶端/伺服器端 PDF 列印解決方案，脫穎而出。由於其全面的 API 和靈活的佈局選項，該庫是創建更複雜 PDF 的絕佳選擇。使用pdfmake ，您可以使用簡單的 JavaScript 物件定義文件內容和結構，然後將其轉換為有效的 PDF 文件。

React-PDF

React-PDF是一個獨特的庫，它提供了使用 React 元件建立 PDF 文件的強大功能。您可以像建立典型的 React 應用程式一樣建立 PDF，而無需在 JavaScript 物件中手動編寫文件結構—使用可重複使用的元件和屬性。 IronPDF 網站提供了一個關於使用 React-PDF 庫建立 PDF 的教學。

為什麼選擇jsPDF？

雖然這三個函式庫都提供了在 React 中產生 PDF 文件的強大工具，但由於 jsPDF 簡單、靈活且在社群中被廣泛採用，因此我們將在本教程中使用jsPDF 。它為初學者提供了較低的入門門檻，其強大的功能集使其成為許多使用場景的合適選擇。我們將透過jsPDF探索的原理將為你產生 PDF 打下堅實的基礎，如果你的專案需要，你將能夠更容易地掌握其他函式庫。

先決條件

在開始本教程之前，請務必確保您已具備必要的工具和知識，以便順利地跟隨教程進行操作。本教程的先決條件如下：

React基礎知識

首先，你應該對 React 有一個基本的了解，React 是一個流行的 JavaScript 函式庫，用於建立使用者介面，特別是單頁應用程式。你應該熟悉 React 中的 JSX（JavaScript XML）、元件、狀態和屬性等概念。

開發環境

您還應該在電腦上設定一個用於建立 React 應用程式的開發環境。這包括文字編輯器或整合開發環境（IDE）。 Visual Studio Code、Atom 或 Sublime Text 等文字編輯器都是不錯的選擇。

Node.js 和 npm

為了管理我們的專案及其依賴項，我們將使用 Node.js 和 npm（Node 套件管理器）。請確保您的電腦上已安裝 Node.js。 Node.js 是一個 JavaScript 執行環境，它允許我們在伺服器上執行 JavaScript。它已預先安裝 npm，因此您可以管理專案所需的庫。

您可以透過執行下列終端命令來檢查是否已安裝 Node.js 和 npm：

node -v
npm -v

node -v
npm -v

SHELL

這些命令將分別顯示您的系統上安裝的 Node.js 和 npm 的版本。如果您尚未安裝或版本已過時，則應從其官方下載頁面下載並安裝最新的 Node.js 長期支援 (LTS) 版本。

步驟 1：項目設定

讓我們從搭建 React 專案開始。打開終端，導航到你想建立專案的目錄。執行以下命令建立一個新的 React 應用程式：

npx create-react-app pdf-from-react

npx create-react-app pdf-from-react

SHELL

如何在 React 中建立 PDF 檔案：圖 1 - 顯示上述命令執行程序的終端螢幕截圖。

此命令將建立一個名為pdf-from-react的新目錄，其中包含基本的 React 專案結構。

接下來，進入專案目錄：

cd pdf-from-react

cd pdf-from-react

SHELL

現在，我們可以在程式碼編輯器中開啟專案並繼續進行實作。

步驟 2：新增所需依賴項

首先，我們需要安裝必要的軟體包。使用以下終端指令安裝react 、 react-dom 、 @mui/material和jspdf 。

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

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

SHELL

步驟 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";

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,
  },
}));

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元件。我們有四個狀態變數： 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);

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 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);
};

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);
};

// 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("p", "pt")來建立jsPDF的新實例。第一個參數" p "指定頁面方向為縱向，第二個參數" pt"指定測量單位為點。

然後我們開始在 PDF 文件中新增內容。我們使用doc.setFontSize設定字體大小，並使用doc.text方法在頁面上的特定座標添加文字。我們新增發票抬頭，包括標題、發票號碼、日期、客戶名稱和客戶地址。

在頁眉之後，我們透過設定字體大小並新增一行（使用doc.line來新增"項目"部分，以將項目與頁首分隔開。接下來，我們遍歷items數組中的每個商品，並透過將數量乘以單價來計算每個商品的總價。我們將所有商品總價的總和更新為total變數。

對於每個商品，我們使用doc.text將商品名稱、數量、價格和商品總價添加到 PDF 文件中。我們遞增yOffset變量，以便將每個項目移到下一行。最後，我們新增一行來分隔各項和總計，並使用doc.text將總金額加到文件的右下角。

新增內容後，我們使用doc.save("invoice.pdf")將產生的 PDF 檔案儲存為"invoice.pdf"到使用者的電腦上。最後，我們將error狀態重設為false ，以清除先前的任何驗證錯誤。

步驟 4：渲染使用者介面

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>
);

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;

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

npm start

SHELL

這將啟動開發伺服器，您可以在瀏覽器中透過http://localhost:3000查看應用程式。

如何在 React 中建立 PDF 文件 - 圖 2：已完成的發票應用程序，其中包含預設的、未填寫的欄位。

在輸入框中填寫客戶姓名、地址和商品詳情，然後點擊"產生發票"按鈕。 PDF 文件將下載到您的計算機，您可以打開它以查看生成的發票的全頁視圖。

如何在 React 中建立 PDF 文件 - 圖 3：應用程式已填寫了三個項目，項目、數量和價格各不相同。

點擊"產生發票"按鈕後，將產生 PDF 文件。

如何在 React 中建立 PDF 檔案 - 圖 4：產生的 PDF。

如果嘗試產生包含任何空白欄位的 PDF 文件，右上角將顯示錯誤訊息。

如何在 React 中建立 PDF 文件 - 圖 5：顯示錯誤訊息，因為並非所有欄位都已填寫。

IronPDF - Node.js PDF 庫

IronPDF for Node.js是一個功能全面的 Node.js PDF 函式庫，在準確性、易用性和速度方面表現出色。它提供了豐富的功能，可以直接在 React 中從 HTML、URL 和圖像生成、編輯和格式化 PDF。 IronPDF 支援包括 Windows、MacOS、Linux、Docker 以及 Azure 和 AWS 等雲端平台在內的各種平台，確保跨平台相容性。它易於使用的 API 使開發人員能夠快速將 PDF 生成和處理整合到他們的 Node.js 專案中。

IronPDF Node.js 的顯著特點包括：像素級完美渲染、豐富的格式選項以及高級編輯功能，例如合併和拆分 PDF、添加註釋和建立 PDF 表單。

以下範例示範如何根據HTML 檔案、HTML 字串和URL產生 PDF 文件：

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");
})();

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 網站以了解更多詳情。

Darrius Serrant

立即與工程團隊聊天

全棧軟件工程師 (WebOps)

Darrius Serrant 擁有邁阿密大學計算機科學學士學位，目前任職於 Iron Software 的全栈 WebOps 市場營銷工程師。從小就迷上編碼，他認為計算既神秘又可接近，是創意和解決問題的完美媒介。

在 Iron Software，Darrius 喜歡創造新事物，並簡化複雜概念以便於理解。作為我們的駐場開發者之一，他也自願教學生，分享他的專業知識給下一代。

對 Darrius 來說，工作令人滿意因為它被重視且有實際影響。

JavaScript PDF 編輯器（開發者教程）

如何在 JavaScript 中創建 PDF ...

客戶亮點：

開發者焦點：

網絡研討會：

如何在 React 中創建 PDF 文件

選擇 React PDF 函式庫

jsPDF

pdfmake

React-PDF

為什麼選擇jsPDF？

先決條件

React基礎知識

開發環境

Node.js 和 npm

步驟 1：項目設定

步驟 2：新增所需依賴項

步驟 3：建立 PDF 生成功能

導入庫

建立樣式元件

建立應用程式元件

處理使用者輸入

產生發票

步驟 4：渲染使用者介面

完整的 App.js 和 App.css 程式碼

步驟 5：測試應用程式

IronPDF - Node.js PDF 庫

結論

如何在 React 中創建 PDF 文件

選擇 React PDF 函式庫

jsPDF

pdfmake

React-PDF

為什麼選擇jsPDF？

先決條件

React基礎知識

開發環境

Node.js 和 npm

步驟 1：項目設定

步驟 2：新增所需依賴項

步驟 3：建立 PDF 生成功能

導入庫

建立樣式元件

建立應用程式元件

處理使用者輸入

產生發票

步驟 4：渲染使用者介面

完整的 App.js 和 App.css 程式碼

步驟 5：測試應用程式

IronPDF - Node.js PDF 庫

結論

相關文章

JavaScript PDF 編輯器（開發者教程）

如何在 JavaScript 中創建 PDF 文件

如何在 JavaScript 中查看 PDF 文件

下一步：開始免費 30 天試用

下一步：開始免費 30 天試用

深受全球超過 200 萬名工程師信賴