💻 Table Guide

DrawPDF hỗ trợ hiển thị bảng biểu đa dạng từ HTML chuẩn. Dưới đây là các tính năng chính:

1. Cấu Trúc Bảng (Structure)

Sử dụng thẻ <table>, <thead>, <tbody>.
Hỗ trợ đầy đủ rowspan và colspan để trộn ô.

<table style="width:100%; border-collapse: collapse;">
  <thead>
    <tr><th colspan="2">Header Group</th></tr>
    <tr><th>Sub 1</th><th>Sub 2</th></tr>
  </thead>
  <tbody>...</tbody>
</table>

2. Định Dạng (Styling)

DrawPDF nhận diện các inline CSS sau:

• Borders: border: 1px solid #000 (áp dụng cho table hoặc td/th).
• Background: background-color: #f0f0f0.
• Alignment: text-align: center/right.
• Padding: padding: 5px.
• Width: width: 100% hoặc pixel cố định.

3. Bảng Động (Dynamic Code)

Sử dụng Code Block (<pre><code>) với // eval để chạy JavaScript trực tiếp.

Các biến có sẵn:

• pdf: Instance của JsPdfService (API vẽ PDF chính).
• data: Dữ liệu được truyền vào (nếu có).

Ví dụ đầy đủ:

// eval
// 1. Dữ liệu mẫu (Header có thể là 1 chiều hoặc 2 chiều)
const headers = [
  [{ content: 'Danh Sách Nhân Sự', colSpan: 3, styles: { halign: 'center' } }], // Row 1
  ['STT', 'Họ Tên', 'Phòng Ban'] // Row 2
];

const rows = [
  [1, 'Nguyễn Văn A', 'Kỹ Thuật'],
  [2, 'Trần Thị B', 'Nhân Sự'],
  [3, 'Lê Văn C', 'Kinh Doanh']
];

// 2. Vẽ bảng
pdf.addTable(headers, rows, {
  theme: 'grid', // 'striped' | 'grid' | 'plain'
  styles: { 
    fontSize: 10,
    cellPadding: 4,
    font: 'Roboto'
  },
  headStyles: {
    fillColor: [41, 128, 185],
    textColor: 255,
    fontStyle: 'bold'
  },
  columnStyles: {
    0: { cellWidth: 15, halign: 'center' }, // Cột STT
    2: { fontStyle: 'italic' } // Cột Phòng Ban
  },
  margin: { top: 10 }
});

// 3. Thêm ghi chú bên dưới
pdf.addText("Tổng số: " + rows.length + " nhân sự.", 15, pdf.currentY + 5, {
    fontStyle: 'italic',
    color: [100, 100, 100]
});

📄 Live Editor