如何为带日期筛选的员工休假表添加Excel/PDF导出按钮（PHP/JS）

Got it, let's figure out how to add those Export to Excel and Export to PDF buttons to your employee leave details table! Since you already have the date filter working, we can go with either a client-side approach (super quick, no backend changes) or a server-side one if you need more control over output formatting. Let's break both down:

1. Client-Side Export (Front-End Only) #

This method lets users export the filtered table data directly in their browser, no backend modifications required. It's perfect for simple, small-to-medium datasets.

Export to Excel (Using SheetJS/xlsx) #

First, add the SheetJS library via CDN, then create an export button and function:

<!-- Add these buttons right after your filter form -->
<button id="exportExcel">Export to Excel</button>
<button id="exportPDF">Export to PDF</button>

<!-- Include SheetJS library -->
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>

<script>
// Excel export function
document.getElementById('exportExcel').addEventListener('click', function() {
  // Replace 'leaveTable' with your actual table ID
  const tableElement = document.getElementById('leaveTable');
  
  // Convert table to a worksheet
  const worksheet = XLSX.utils.table_to_sheet(tableElement);
  // Create a new workbook and add the worksheet
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Employee Leave Details');
  
  // Trigger download
  XLSX.writeFile(workbook, 'Employee_Leave_Details.xlsx');
});
</script>

Export to PDF (Using jsPDF + autoTable) #

For PDF exports, we'll use jsPDF with the autoTable plugin to handle table formatting:

<!-- Include jsPDF and autoTable libraries -->
<script src="https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jspdf-autotable@3.5.28/dist/jspdf.plugin.autotable.min.js"></script>

<script>
// PDF export function
document.getElementById('exportPDF').addEventListener('click', function() {
  const { jsPDF } = window.jspdf;
  const pdfDoc = new jsPDF();
  
  // Replace 'leaveTable' with your actual table ID
  const tableElement = document.getElementById('leaveTable');
  
  // Add a title to the PDF
  pdfDoc.setFontSize(16);
  pdfDoc.text('Employee Leave Details', 14, 16);
  
  // Generate the table in the PDF
  pdfDoc.autoTable({
    html: tableElement,
    startY: 22,
    styles: { fontSize: 10 },
    headStyles: { fillColor: '#2c3e50', textColor: '#ffffff' }
  });
  
  // Trigger download
  pdfDoc.save('Employee_Leave_Details.pdf');
});
</script>

2. Server-Side Export (Backend Processing) #

If you need more control over formatting, or have large datasets, handle exports on your backend. We'll modify your existing form to send export requests, then generate files server-side.

Front-End Changes #

Update your filter form to include export buttons as submit triggers:

<form name="filter" method="POST">
  <input type="date" name="start">
  <input type="date" name="end">
  <input type="submit" name="submit" value="Filter">
  <!-- Export buttons -->
  <button type="submit" name="export" value="excel">Export to Excel</button>
  <button type="submit" name="export" value="pdf">Export to PDF</button>
</form>

Back-End Example (PHP) #

Below is a simplified example using PHP with PhpSpreadsheet (for Excel) and TCPDF (for PDF). Adjust the data fetching logic to match your existing backend code:

<?php
// Assume you've already fetched filtered leave data into $filteredLeaveData array

if (isset($_POST['export'])) {
    switch ($_POST['export']) {
        case 'excel':
            // Set Excel headers
            header('Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
            header('Content-Disposition: attachment;filename="Employee_Leave_Details.xlsx"');
            header('Cache-Control: max-age=0');

            // Use PhpSpreadsheet to generate Excel
            require 'vendor/autoload.php';
            use PhpOffice\PhpSpreadsheet\Spreadsheet;
            use PhpOffice\PhpSpreadsheet\Writer\Xlsx;

            $spreadsheet = new Spreadsheet();
            $sheet = $spreadsheet->getActiveSheet();

            // Add table headers
            $sheet->setCellValue('A1', 'Employee Name');
            $sheet->setCellValue('B1', 'Leave Type');
            $sheet->setCellValue('C1', 'Start Date');
            $sheet->setCellValue('D1', 'End Date');

            // Populate data rows
            $row = 2;
            foreach ($filteredLeaveData as $leave) {
                $sheet->setCellValue('A' . $row, $leave['employee_name']);
                $sheet->setCellValue('B' . $row, $leave['leave_type']);
                $sheet->setCellValue('C' . $row, $leave['start_date']);
                $sheet->setCellValue('D' . $row, $leave['end_date']);
                $row++;
            }

            $writer = new Xlsx($spreadsheet);
            $writer->save('php://output');
            exit;

        case 'pdf':
            // Set PDF headers
            header('Content-Type: application/pdf');
            header('Content-Disposition: attachment;filename="Employee_Leave_Details.pdf"');

            // Use TCPDF to generate PDF
            require_once('tcpdf/tcpdf.php');
            $pdf = new TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);

            $pdf->SetCreator(PDF_CREATOR);
            $pdf->SetTitle('Employee Leave Details');
            $pdf->AddPage();

            // Add title
            $pdf->SetFont('helvetica', 'B', 16);
            $pdf->Cell(0, 10, 'Employee Leave Details', 0, 1, 'C');

            // Build HTML table
            $html = '<table border="1" cellpadding="4">
                        <tr>
                            <th>Employee Name</th>
                            <th>Leave Type</th>
                            <th>Start Date</th>
                            <th>End Date</th>
                        </tr>';
            foreach ($filteredLeaveData as $leave) {
                $html .= "<tr>
                            <td>{$leave['employee_name']}</td>
                            <td>{$leave['leave_type']}</td>
                            <td>{$leave['start_date']}</td>
                            <td>{$leave['end_date']}</td>
                        </tr>";
            }
            $html .= '</table>';

            $pdf->writeHTML($html, true, false, true, false, '');
            $pdf->Output('Employee_Leave_Details.pdf', 'D');
            exit;
    }
}
?>

内容的提问来源于stack exchange，提问作者Keerthi Kamarthi