如何使用 jsPDF 在 React 中从 JSON 数据创建 PDF
最新回答
吧唧妳壹口
2022-05-19 15:54:34
在 React 中使用 jsPDF 从 JSON 数据创建 PDF 的完整实现步骤如下：
1. 环境准备与依赖安装- 确保已创建 React 项目（通过 create-react-app 或其他方式）
- 安装核心依赖库：
在组件文件中（如 App.jsx）添加示例数据生成函数：
const generateUsers = (count) => { const users = []; for (let i = 1; i <= count; i++) { users.push({ id: i, firstname: `firstname_${i}`, lastname: `lastname_${i}`, email: `email_${i}@example.com`, address: [ `street ${i + 1}, address line 1`, `district ${(i % 7) + 1}, city_${i}` ] }); } return users;};3. 实现 PDF 生成核心逻辑创建独立的 PDF 生成模块（如 pdf.jsx）：
import jsPDF from "jspdf";import "jspdf-autotable";export const generatePDF = (data) => { // 基础配置 const doc = new jsPDF({ orientation: "l", // 横向 unit: "pt", // 测量单位 format: "a3" // 纸张尺寸 }); // 添加标题 doc.setFontSize(16); doc.text( "JSON Data PDF", doc.internal.pageSize.getWidth() / 2, 30, { align: "center" } ); // 表格配置 const tableColumnHeaders = Object.keys(data[0]); const tableRows = data.map(row => Object.keys(row).map(key => { const value = row[key]; return Array.isArray(value) ? value.join(", ") : value; }) ); // 生成表格 doc.autoTable({ startY: 50, head: [tableColumnHeaders], body: tableRows, margin: { top: 50, left: 20, right: 20 }, styles: { fontSize: 10, cellPadding: 5, valign: "middle" }, headStyles: { fillColor: [41, 128, 185], // 标题行背景色 textColor: 255, // 标题行文字颜色 fontSize: 12 }, alternateRowStyles: { fillColor: [245, 245, 245] // 交替行背景色 }, columnStyles: { auto: { cellWidth: "auto" } // 自动列宽 }, theme: "striped" // 条纹主题 }); // 保存文件 doc.save("JS-pdf.pdf");};4. 集成到 React 组件在主组件中调用 PDF 生成功能：
import "./styles.css";import { generatePDF } from "./pdf.jsx";export default function App() { const handlePDFGeneration = () => { const jsonData = generateUsers(100); // 生成100条测试数据 generatePDF(jsonData); }; return ( <div className="app"> <h1>PDF Generator Demo</h1> <button onClick={handlePDFGeneration}> Generate PDF from JSON </button> </div> );}关键实现细节说明文档配置：
使用 new jsPDF() 初始化时指定：
orientation: "l"（横向）或 "p"（纵向）
unit: "pt"（点）、"mm"（毫米）等
format: "a3"、"a4" 或自定义尺寸 [width, height]
表格处理：
自动提取 JSON 对象的键作为表头
处理嵌套数组数据（如地址字段）
通过 autoTable 的 styles 参数控制：
字体大小、单元格内边距
标题行样式（背景色、文字颜色）
交替行样式
样式优化：
标题居中显示
表格自动列宽
条纹主题增强可读性
中文显示问题：
import jsPDF from 'jspdf';import 'jspdf-autotable';// 添加中文字体支持（需引入字体文件）const doc = new jsPDF();doc.addFont('simhei.ttf', 'SimHei', 'normal');doc.setFont('SimHei');大数据量分页：
autoTable 会自动处理分页
可通过 pageBreak 参数控制：
doc.autoTable({ // ...其他配置 pageBreak: 'auto', margin: { top: 50 }});自定义尺寸：
// 使用自定义尺寸（宽3000pt，高1000pt）const doc = new jsPDF("l", "pt", [3000, 1000]);
该实现方案完整覆盖了从 JSON 数据到 PDF 的转换流程，包含表格生成、样式定制和文件保存等核心功能，可直接集成到 React 项目中使用。
热门标签
