วิธีแปลง HTML เป็น PDF
การสร้าง PDF จาก HTML มีประโยชน์สำหรับการสร้างใบแจ้งหนี้ รายงาน จดหมาย ใบรับรอง — เอกสารใดก็ตามที่คุณต้องการควบคุมรูปแบบด้วย CSS แต่แจกจ่ายในรูปแบบ PDF
วิธีแปลง HTML เป็น PDF
- วาง HTML ของคุณ — ใส่โค้ด HTML ของคุณ รวมถึง CSS แบบอินไลน์หรือแท็ก
<style>ในตัวแก้ไข โค้ดสามารถรวมโครงสร้างหน้าเต็มที่มีส่วนหัว ตาราง รูปภาพ และสไตล์ - ดูตัวอย่างการเรนเดอร์ — การแสดงตัวอย่างสดแสดงให้เห็นว่า PDF ของคุณจะถูกเรนเดอร์อย่างไรในขณะที่คุณพิมพ์ ปรับ HTML และ CSS จนกว่าการเรนเดอร์จะตรงกับความคาดหวังของคุณ
- สร้างและดาวน์โหลด — คลิกปุ่มสร้างเพื่อสร้าง PDF ในเบราว์เซอร์ของคุณ จากนั้นดาวน์โหลดทันที
สิ่งที่คุณสามารถสร้างได้
- ใบแจ้งหนี้และใบเสร็จ — ตารางที่มีโครงสร้างพร้อมเอกลักษณ์ของบริษัท รายการสินค้า และยอดรวม
- รายงาน — เอกสารที่จัดรูปแบบด้วยหัวข้อ ย่อหน้า กราฟ และตารางข้อมูล
- ใบรับรอง — เลย์เอาต์ที่จัดสไตล์ด้วยแบบอักษรที่กำหนดเอง ขอบ และข้อความที่จัดกึ่งกลาง
- จดหมาย — การติดต่อสื่อสารทางธุรกิจที่มีหัวจดหมาย เนื้อหา และพื้นที่ลายเซ็น
- เรซูเม่ — เลย์เอาต์ที่เรียบร้อยส่งออกเป็น PDF ที่สะอาดสำหรับการสมัครงานของคุณ
เคล็ดลับการจัดสไตล์สำหรับเอาต์พุต PDF
ใช้สไตล์อินไลน์หรือแท็ก <style> — สไตล์ชีตภายนอกจะไม่ถูกโหลด วาง CSS ทั้งหมดของคุณแบบอินไลน์บนองค์ประกอบหรือในบล็อก <style> ใน HTML
กำหนดขอบหน้า — ใช้ @page { margin: 20mm; } ใน CSS เพื่อควบคุมพื้นที่รอบเนื้อหาของคุณใน PDF
ใช้หน่วยที่เหมาะสมสำหรับการพิมพ์ — mm, cm และ pt สามารถคาดเดาได้มากกว่าใน PDF เมื่อเทียบกับ px หรือ rem ใช้ mm สำหรับขอบและการเว้นวรรคที่ต้องตรงกับมิติทางกายภาพ
หลีกเลี่ยงเลย์เอาต์ที่ขึ้นกับวิวพอร์ต — ความกว้างเป็นเปอร์เซ็นต์และความกว้างพิกเซลคงที่ทำงานได้ดีที่สุด หน่วยที่เกี่ยวข้องกับวิวพอร์ต (vw, vh) อาจไม่ทำงานตามที่คาดหวังใน PDF
เคล็ดลับ
- ดูตัวอย่างก่อน — ตรวจสอบการแสดงตัวอย่างสดเสมอก่อนสร้าง การวนซ้ำใน HTML จะเร็วกว่ามากกว่าการสร้าง PDF ใหม่ทุกครั้ง
- ใช้ base64 สำหรับรูปภาพ — แปลงรูปภาพเป็น Data URI base64 เพื่อรับประกันการรวมไว้ใน PDF URL ภายนอกอาจล้มเหลวเนื่องจากข้อจำกัด CORS
- ทำให้เรียบง่าย — เลย์เอาต์ CSS ที่ซับซ้อน (กริดซ้อนกัน องค์ประกอบที่จัดตำแหน่งซ้อนทับ) อาจไม่เรนเดอร์อย่างสมบูรณ์ เลย์เอาต์ที่เรียบง่ายกว่าให้ PDF ที่เชื่อถือได้มากกว่า
- ทดสอบการแบ่งหน้า — สำหรับเอกสารหลายหน้า ใช้
page-break-before: alwaysเพื่อควบคุมว่าหน้าใหม่จะเริ่มที่ใด
คำถามที่พบบ่อย
PDF เก็บรักษาสไตล์ CSS ของฉันหรือไม่?
ใช่ ตัวแปลงเรนเดอร์ HTML ของคุณด้วย CSS ที่ใช้ รวมถึงสี แบบอักษร ขอบ และเลย์เอาต์ PDF จะดูเหมือนหน้าเว็บที่เรนเดอร์ ไม่ใช่โค้ดต้นฉบับดิบ
ฉันสามารถรวมรูปภาพใน PDF ได้หรือไม่?
ได้ ใช้รูปภาพ base64 (Data URI) เพื่อผลลัพธ์ที่เชื่อถือได้มากที่สุด URL รูปภาพภายนอกอาจใช้งานได้หากเข้าถึงได้และเข้ากันได้กับ CORS
HTML ของฉันถูกส่งไปยังเซิร์ฟเวอร์หรือไม่?
ไม่ การแปลงเกิดขึ้นทั้งหมดในเบราว์เซอร์ของคุณ โค้ดและ PDF ที่สร้างขึ้นของคุณไม่เคยออกจากอุปกรณ์ของคุณ
ฟีเจอร์ CSS ใดบ้างที่รองรับ?
CSS มาตรฐาน รวมถึงเลย์เอาต์ สี แบบอักษร พื้นหลัง ขอบ และตาราง รองรับได้ดี ฟีเจอร์ขั้นสูงเช่น CSS Grid แอนิเมชันที่ซับซ้อน และกรณีขอบเขตของ Flexbox บางอย่างอาจมีข้อจำกัด