<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON to Multi-Page PDF with Table</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.8.2/jspdf.plugin.autotable.min.js"></script>
</head>
<body>
<button onclick="generatePDF()">Generate PDF</button>
<script>
const { jsPDF } = window.jspdf;
const jsonData = {
employees: [
{ firstName: "John", lastName: "Doe", age: 30, role: "Developer" },
{ firstName: "Jane", lastName: "Smith", age: 25, role: "Designer" },
{ firstName: "Peter", lastName: "Jones", age: 35, role: "Manager" },
{ firstName: "Alice", lastName: "Brown", age: 28, role: "Analyst" },
{ firstName: "Bob", lastName: "Wilson", age: 40, role: "Engineer" },
{ firstName: "Carol", lastName: "Davis", age: 32, role: "Support" }
]
};
function generatePDF() {
const doc = new jsPDF();
// Define table columns
const columns = [
{ header: "First Name", dataKey: "firstName" },
{ header: "Last Name", dataKey: "lastName" },
{ header: "Age", dataKey: "age" },
{ header: "Role", dataKey: "role" }
];
// Add table with auto-pagination
doc.autoTable({
head: [columns.map(col => col.header)],
body: jsonData.employees.map(employee => [
employee.firstName,
employee.lastName,
employee.age,
employee.role
]),
startY: 20,
theme: "grid",
margin: { top: 10 }
});
// Save the PDF
doc.save("employees_table.pdf");
}
</script>
</body>
</html>
No comments:
Post a Comment