Khi xây dựng bố cục, bạn có thể muốn một phần nội dung nối tiếp tự nhiên, một khối được giữ liền mạch hoặc một phần mới bắt đầu trên tờ riêng. Tembuilder cho phép bạn kết hợp những cách này ngay trong cùng một mẫu.
Bạn sẽ thiết lập cách phân trang cho từng section trong Config → Page breaks. Bài này hướng dẫn cách dùng các lựa chọn đó, xử lý bảng dài và tìm những quy tắc CSS có thể ảnh hưởng đến việc chia trang.
1. Mở thiết lập ngắt trang của section
Trong Structure, chọn section muốn chỉnh rồi mở Config → Page breaks. Có hai điều khiển:
- Keep together: section có được tách qua nhiều tờ PDF hay không.
- Page break: có chủ động ngắt trang trước hoặc sau section hay không.
Hai điều khiển này độc lập. Chẳng hạn, một section có thể bắt đầu ở tờ mới nhưng vẫn được phép chạy qua nhiều tờ nếu nội dung dài.
Với bảng hoặc danh sách có số dòng thay đổi, bắt đầu bằng Keep together: Off và Page break: None để nội dung tự phân trang.
2. Giữ một khối nội dung cùng nhau
Chọn Keep together: On cho những section ngắn cần liền mạch, như chữ ký, thông tin thanh toán hoặc phần tổng kết. Khi khoảng trống còn lại không đủ, section được chuyển sang tờ tiếp theo.
Chọn Off cho bảng dài hoặc danh sách cần nối qua nhiều tờ. Giữ cả bảng bằng On có thể khiến phần còn lại của tờ trước bị bỏ trống.
Thiết lập áp dụng cho toàn bộ section. Nếu chỉ muốn giữ phần chữ ký, hãy đặt chữ ký thành một section riêng thay vì bật On cho section đang chứa cả bảng dịch vụ.
3. Chọn nơi bắt đầu section mới
Dùng Page break khi muốn tách rõ các phần của tài liệu, chẳng hạn đưa điều khoản sang tờ mới sau phần hóa đơn.
| Lựa chọn | Cách áp dụng |
|---|---|
| None | Không ép ngắt trước hoặc sau section. |
| Before | Bắt đầu section này ở tờ mới khi có nội dung phía trước. |
| After | Bắt đầu section tiếp theo ở tờ mới. |
| Both | Ngắt cả trước và sau section khi có nội dung ở hai phía. |
Both không có nghĩa section chỉ được nằm trên một tờ; việc cho phép tách bên trong vẫn do Keep together quyết định.
Ngắt ngay tại ranh giới trang không tạo thêm một tờ trắng. Ví dụ, Before trên section đầu tiên không chèn một tờ trống trước tài liệu.
4. Cho bảng dài nối qua nhiều tờ
Trong section chứa bảng, đặt Keep together: Off. Dùng <thead> cho hàng tiêu đề và <tbody> cho các dòng dữ liệu; khi bảng kéo dài sang tờ tiếp theo, hàng tiêu đề trong <thead> được lặp lại.
Với danh sách dịch vụ, bạn có thể tạo dòng bảng từ params.lineItems:
<table>
<thead>
<tr><th>Dịch vụ</th><th>Số lượng</th><th>Thành tiền</th></tr>
</thead>
<tbody>
{{#each params.lineItems}}
<tr>
<td>{{ description }}</td>
<td>{{ qty }}</td>
<td>{{ amount }}</td>
</tr>
{{/each}}
</tbody>
</table>Để phần tổng tiền nằm sau dòng cuối của bảng, đặt nó sau bảng hoặc trong section tiếp theo với Page break: None. Nếu muốn giữ khối tổng tiền liền mạch, chỉ bật Keep together cho section tổng tiền.
Xem Mảng và object để tìm hiểu cách đưa danh sách dữ liệu vào mẫu.
5. Khi nội dung bị cắt hoặc bị đẩy cả khối
Hai tình huống này thường cần chỉnh ở hai nơi khác nhau:
| Hiện tượng | Nơi cần xem |
|---|---|
| Cả section chuyển sang tờ sau, để lại khoảng trống lớn | Keep together của section và break-inside trong CSS của khối chứa. |
| Các dòng cuối biến mất ở mép một khối | height, max-height và overflow trong CSS của khối đó. |
| Section luôn bắt đầu ở tờ mới dù phía trước còn chỗ | Page break: Before/Both, ngắt After của section trước hoặc break-before trong CSS. |
Ví dụ, khối .items có chiều cao cố định và overflow: hidden sẽ cắt phần vượt ra ngoài. Nếu khối này cần giãn theo danh sách, bỏ giới hạn chiều cao và để nội dung hiển thị như hình dưới.
Thiết lập trong Config áp dụng ở cấp section. Các phần tử bên trong vẫn có thể có quy tắc ngắt trang riêng trong CSS, nên đây là nơi cần xem tiếp nếu đã đổi Config mà kết quả chưa thay đổi.
.items {
height: 120px;
overflow: hidden;
}.items {
height: auto;
overflow: visible;
}