Làm quen với concept của Tembuilder

Để tạo PDF trong Tembuilder, bạn bắt đầu bằng việc tổ chức nội dung trong một template. Cấu trúc tài liệu gồm các thành phần sau:

• Template: Mẫu định nghĩa nội dung và cách trình bày toàn bộ tài liệu, gồm một hoặc nhiều page.
• Page: Đơn vị tổ chức nội dung trong template. Mỗi page chứa các section.
• Section: Khối nội dung có HTML/CSS riêng, giúp bạn chỉnh sửa từng phần độc lập.
• Layout: Quy định thứ tự các page, section nào thuộc page nào và thứ tự hiển thị các section trong page.

Khi đã có cấu trúc, bước tiếp theo là dùng Global để thiết lập phong cách thống nhất cho tài liệu.

Sau khi có cấu trúc, bạn dùng Global để thiết lập cách trình bày chung cho toàn bộ template. Các page kế thừa những thiết lập này, giúp tài liệu có phong cách thống nhất:

• Font: Khai báo các phông chữ dùng trong tài liệu và thứ tự ưu tiên sử dụng.
• Typography: Đặt cỡ chữ, giãn dòng, giãn ký tự, căn lề chữ và màu chữ mặc định.
• Lề nội dung (margin): Thiết lập lề trên, dưới, trái, phải; có thể dùng lề đối xứng cho trang chẵn và lẻ.
• Nền trang (background): Đặt màu nền hoặc ảnh nền, cùng kích thước, vị trí và cách lặp ảnh.
• Header và footer: Thiết lập phần đầu và cuối trang dùng chung, cùng lề và nền cho từng vùng.

Font, typography và lề ảnh hưởng đến cách nội dung xuống dòng và phân trang. Cách ngắt từng section được thiết lập riêng ở phần phân trang.

Khi một page cần lề hoặc nền khác, bạn bật cấu hình riêng ở page đó. Section cũng có thể có props riêng; các props này chỉ được sử dụng trong chính section đó.

Cấu trúc và phong cách đã sẵn sàng; bước tiếp theo là xác định nội dung giữ nguyên trong mẫu và dữ liệu thay đổi mỗi lần tạo PDF.

Tùy cách thiết kế dữ liệu, bạn có thể chọn một trong hai cách sau:

• Props (properties): Lưu giá trị trong template, phù hợp với nhãn tiêu đề hoặc nội dung dùng lại qua nhiều lần render.
• Params (parameters): Truyền dữ liệu vào mỗi lần render, phù hợp với nội dung thay đổi theo từng tài liệu. Dữ liệu có thể là văn bản, số, một đối tượng hoặc danh sách.

Engine điền các giá trị này vào HTML/CSS của từng section. Bạn dùng lại một template với nhiều bộ dữ liệu; variant giúp đổi props hoặc layout khi cần biến thể. Dữ liệu thay đổi cũng có thể làm nội dung dài hơn, nên bước tiếp theo là bố trí nó trong vùng trang.

Bạn có thể chọn khổ giấy cho tài liệu và tự đặt lề để xác định vùng hiển thị nội dung. Phần bên trong đường nét đứt ở hình minh họa là vùng đặt nội dung sau khi trừ lề.

• Khổ giấy: Chọn một trong các khổ được hỗ trợ: A0, A1, A2, A3, A4, A5, A6, US Letter và Legal.
• Lề nội dung (margin): Tự đặt giá trị cho từng cạnh trên, dưới, trái và phải. Bạn có thể dùng lề chung từ Global hoặc đặt lề riêng cho từng page.
• Cách trình bày: Font, cỡ chữ, giãn dòng và CSS của section quyết định cách nội dung nằm trong vùng đã thiết lập.

Khổ giấy và lề cùng quyết định diện tích dành cho nội dung. Khi nội dung không còn vừa trên một tờ, thiết lập phân trang sẽ quyết định cách chia hoặc chuyển nội dung sang tờ tiếp theo.

Một page trong template là một nhóm nội dung, có thể trải qua nhiều tờ PDF khi render. Header/footer lặp lại trên các tờ đó, còn các section tiếp tục theo thứ tự trong layout.

Trong Config của section, bạn có thể kết hợp thiết lập giữ nội dung cùng nhau với lựa chọn ngắt trang trước/sau:

• Giữ khối (Keep together): Khi bật, ưu tiên giữ toàn bộ section trên cùng một tờ. Nếu chỗ còn lại không đủ nhưng section vẫn vừa một tờ, cả khối được chuyển sang tờ tiếp theo. Khi tắt, nội dung được phép chia qua nhiều tờ.
• Không ép ngắt (None): Không chủ động ngắt trước hoặc sau section; nội dung tiếp tục theo chỗ còn lại trên trang.
• Ngắt trước (Before): Bắt đầu section ở tờ mới khi có nội dung đứng trước trong cùng page.
• Ngắt sau (After): Chuyển section tiếp theo trong cùng page sang tờ mới.
• Ngắt cả trước và sau (Both): Bắt đầu section ở tờ mới và chuyển section tiếp theo sang một tờ khác.

Ví dụ, khối chữ ký ngắn có thể bật Giữ khối để tránh bị tách, còn bảng dài nên cho phép chia qua nhiều tờ. Các thiết lập này không tự thu nhỏ nội dung; một section quá lớn vẫn có thể vượt quá diện tích của một tờ.

Khi cấu trúc, cách trình bày và dữ liệu đã sẵn sàng, Tembuilder kết hợp chúng để tạo PDF theo các bước sau:

• Chọn mẫu: Sử dụng template và variant bạn muốn render.
• Lấy thiết kế: Xác định thứ tự page, section, các giá trị props và cấu hình áp dụng.
• Điền dữ liệu: Đưa parameters của lần render vào nội dung mẫu.
• Dựng tài liệu: Ghép HTML/CSS của các phần thành tài liệu hoàn chỉnh.
• Phân trang và xuất PDF: Chia nội dung thành các tờ theo khổ giấy, lề và quy tắc ngắt trang, sau đó tạo file PDF.

Trong lúc thiết kế, Preview trực tiếp giúp bạn xem nội dung và bố cục đang chỉnh. Để kiểm tra số tờ, header/footer và vị trí ngắt trang thực tế, hãy xem kết quả trong tab PDF.