ทดสอบการขึ้นหน้าใหม่ทั้งแบบธรรมชาติ (natural) และแบบบังคับ (forced page-break)
เอกสารนี้ทดสอบความสามารถในการสร้าง PDF หลายหน้าของ TypeScript PDF Creator
โดยครอบคลุมสถานการณ์ต่าง ๆ ได้แก่ การขึ้นหน้าแบบธรรมชาติเมื่อเนื้อหาเกินขนาดหน้า
และการบังคับขึ้นหน้าใหม่ด้วย page-break-before: always
ในการสร้าง PDF เนื้อหาที่ยาวเกินขนาดหน้าจะถูกจัดเรียงต่อยังหน้าถัดไปโดยอัตโนมัติ ระบบจะคำนวณพิกัด Y ของแต่ละ element และตัดสินใจว่าควรอยู่ในหน้าใด
สำหรับการบังคับขึ้นหน้า สามารถใช้ CSS property page-break-before: always
หรือ break-before: page กับ element ที่ต้องการเริ่มต้นหน้าใหม่
block นี้สูง 350px เพื่อกระตุ้นให้เกิดการขึ้นหน้าโดยธรรมชาติ
(Natural Page Break Trigger)
เนื้อหานี้ควรปรากฏบนหน้าถัดไปหลังจากกล่องขนาดใหญ่ด้านบนดันเนื้อหาเกินขอบหน้า A4 ซึ่งมีความสูงประมาณ 841 จุด และมี margin ด้านบน-ล่าง 20mm (ประมาณ 113 จุด)
Forced page break via page-break-before: always
หน้านี้เริ่มต้นด้วย page-break-before: always บน div.chapter-header
ดังนั้นไม่ว่าเนื้อหาก่อนหน้าจะอยู่ที่ตำแหน่งใด หน้านี้จะเริ่มต้นหน้าใหม่เสมอ
เนื้อหาคอลัมน์ซ้าย Lorem ipsum dolor sit amet consectetur adipiscing elit
เนื้อหาคอลัมน์ขวา สามารถใช้ Flex layout เพื่อจัดวางเนื้อหาแบบ 2 คอลัมน์ได้
พื้นที่จำลองอีกชิ้น — เพื่อทดสอบการล้นไปยังหน้าที่ 3
Page 3 — Nested lists and subheadings
สามารถมีหัวข้อย่อยหลายระดับเพื่อจัดโครงสร้างเอกสารให้อ่านง่าย
นี่คือหัวข้อระดับที่ 4 ซึ่งใช้สำหรับเนื้อหาที่ต้องการความละเอียดสูง
bun installbun run src/index.tsPage 4 — Summary and closing
ทดสอบการสร้าง PDF หลายหน้าเสร็จสมบูรณ์แล้ว ไฟล์ PDF นี้มีทั้งหมด 4 หน้า โดยแต่ละหน้ามี header และ footer ที่แสดงหมายเลขหน้าอัตโนมัติจาก @page rules