如何使用 jsPDF 在 React 中從 JSON 資料建立 PDF

本文將展示如何在 JS/React 中從 JSON 資料建立 PDF。

身為開發人員，我們必須將 PDF 產生整合到應用程式中。因此，在本文中，我們將討論使用 jspdf 建立 PDF。

那麼，讓我們開始吧。

我們將專門為本文使用 React 環境。我假設你熟悉 JavaScript/React 並且已經設定了 React 環境

在深入研究之前，我們需要一些範例資料來產生 PDF。我們將創建一個方法來產生這些數據。

現在，我們需要安裝一些 npm 套件 jspdf 和 jspdf-autotable。

jsPDF 負責建立 PDF，而 jsPDF-AutoTable 則用於在 PDF 中以表格格式顯示資料。

您可以使用以下命令來安裝這兩個軟體包。

現在，我們將開發一種處理 PDF 建立的方法。我將建立一個通用的generatePDF方法，這樣你就可以在任何需要的地方使用它。

1。函數定義

函數generatePDF將資料作為參數，該參數應該是一個物件數組（要包含在PDF中的JSON資料）。

2。 PDF 文件設定
使用以下選項建立一個新的 jsPDF 實例：

• “l”表示橫向。
• “pt”作為測量單位（點）。
• 「a3」作為紙張尺寸。

3。為 PDF 新增標題

• 將字體大小設定為 16 磅。
• 在頁面頂部（y 位置為 30）新增居中標題「JSON 資料 PDF」。

4。提取表頭

• 從資料中的第一個物件中提取鍵以用作表格的列標題。
• 假設資料至少有一個對象，且所有對像都有相似的鍵。

5。設定表格行格式

迭代資料中的每個對象，建立一個新數組（tableRows），其中：

• 每個條目對應表格的一行。
• 對於每個單元格，如果值為數組，則用逗號連接元素；否則，它會按原樣添加值。

6。將表格加入 PDF

使用以下選項設定表：

• startY: 50 將表格放置在頁面頂部下方 50 點處。
• head 使用 tableColumnHeaders 作為表格的標題行。
• body 填入了 tableRows，逐行顯示資料。
• margin 指定表格周圍的間距。
• 樣式調整儲存格字體大小、填滿和垂直對齊方式。
• headStyles 設定標題行樣式：藍色背景、白色文字和 12 號字體。
• alternateRowStyles 為交替行添加淺灰色背景。
• columnStyles 嘗試自動設定列寬。
• theme: "striped" 將條紋主題套用至表格。

7。儲存 PDF
以檔案名稱「JS-pdf.pdf」儲存 PDF 檔案。

這是此程式碼的完整版本。

現在已經完成了。希望你喜歡它。祝你有美好的一天！ ！ ！

以上是如何使用 jsPDF 在 React 中從 JSON 資料建立 PDF的詳細內容。更多資訊請關注PHP中文網其他相關文章！