在實際環境中測試
在生產環境中測試無浮水印。
在任何需要的地方都能運作。
全功能產品
獲得30天完全功能的產品。
幾分鐘內即可啟動並運行。
24/5技術支援
試用產品期間完全訪問我們的支援工程團隊
PDF 工具
如何在 React 中建立 PDF 檔案
發佈 2023年8月24日
歡迎來到從React應用程式創建PDF文件的教程! 在本教程中，我們將探討各種生成 PDF 的庫，並學習如何使用流行的 jsPDF 庫直接從你的 React 組件創建 PDF 文件。 那麼，讓我們深入開始吧!
PDF(可攜式文件格式)是一種廣泛使用的文件格式，用於共享和列印文件，同時保留其版面配置和格式。 作為一名 React 網頁開發者，您可能會遇到需要直接從您的 React 應用程式生成 PDF 文檔的情況，例如發票、報告或銷售合同。
選擇 React PDF 庫
在 React 應用程式中建立 PDF 文件可能是一項艱鉅的任務，尤其是對於不熟悉此領域的新手來說。 幸運的是，我們有多個第三方庫可用，這大大簡化了這個過程。 每個函式庫都有其獨特的功能和工具，可以滿足不同的使用案例。 讓我們更詳細地探討這些庫。
jsPDF
jsPDF 是開發人員中非常受歡迎的庫，用於從 JavaScript 生成 PDF 文件。 其主要賣點之一是其簡單性。 其語法和使用方式相當簡單，可以讓您在短時間內將 HTML 內容轉換為 PDF 文件。
它使您能夠控制 PDF 的格式和佈局，包括更改字體大小和顏色，以及調整頁面方向和大小。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 有基本的了解，這是一個用於構建使用者界面（特別是單頁應用）的流行 JavaScript 庫。 您應該熟悉像 JSX 這樣的概念。(JavaScript XML), React 中的組件、狀態和屬性。
開發環境
您還應該在您的計算機上設置開發環境以構建 React 應用程序。 這包括文字編輯器或整合開發環境(集成開發環境). 像 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
此命令將建立一個名為 pdf-from-react 的新目錄，其中包含基本的 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 元件。 我們有四個狀態變量：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」指定頁面方向為縱向，第二個參數「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：渲染 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。
在輸入欄位中填寫客戶姓名、地址和項目詳細資訊，然後點擊「生成發票」按鈕。 PDF 檔案將會下載到您的電腦，您可以開啟它以查看生成的發票的全頁視圖。
當您點擊「生成發票」按鈕時，將生成 PDF 文件。
如果嘗試生成含有任何空字段的 PDF，錯誤訊息將顯示在右上角。
IronPDF - Node.js PDF 庫
IronPDF for Node.js是一個功能全面的Node.js PDF庫，其在準確性、易用性和速度方面表現出色。 它提供了廣泛的功能，可以直接從 HTML、URL 和 React 中的圖像生成、編輯和格式化 PDF。 IronPDF 支援多個平台，包括 Windows、MacOS、Linux、Docker，以及像 Azure 和 AWS 這樣的雲端平台，確保跨平台相容性。 其使用者友好的 API 允許開發者快速將 PDF 生成和操作集成到他們的 Node.js 項目中。
IronPDF Node.js 的顯著功能包括：像素完美的渲染、廣泛的格式選項，和高級編輯能力，如合併和拆分 PDF、添加註釋和建立 PDF 表單。
以下是一個從...生成 PDF 文件的範例HTML檔案, HTML 字串，和 網址:
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 網站了解更多詳情。
