ไม่มีการอัปโหลด, 100% ในเครื่อง, ไม่มีบัญชี

HTML เป็น PDF

วาง HTML เลือกขนาดหน้า แล้วดาวน์โหลด PDF, ทุกอย่างเรนเดอร์ในเบราว์เซอร์ของคุณ

HTML เป็น PDF ทำงานอย่างไร

HTML to PDF รับ HTML markup ที่คุณวางลงในโปรแกรมแก้ไข ทำความสะอาดด้วย DOMPurify เพื่อลบ script และแอตทริบิวต์ที่ไม่ปลอดภัย เรนเดอร์บน off-screen canvas โดยใช้ html2canvas และเข้ารหัสผลลัพธ์เป็น PDF ด้วย jsPDF pipeline ทั้งหมดทำงานภายในแท็บเบราว์เซอร์ของคุณ ไม่มีโค้ด HTML หรือผลลัพธ์ที่เรนเดอร์ถูกส่งไปยังเซิร์ฟเวอร์ใดๆ วิธีนี้ทำให้เหมาะสำหรับการแปลง HTML snippet ที่มีข้อมูลส่วนตัวที่คุณไม่ต้องการวางลงในบริการออนไลน์

ควรเข้าใจรูปแบบผลลัพธ์ก่อนใช้งาน หน้า PDF เป็นภาพ raster ไม่ใช่ข้อความเวกเตอร์ ข้อความในผลลัพธ์ไม่สามารถเลือก ค้นหา หรือ reflow ได้ ทรัพยากรภายนอกเช่นภาพที่อ้างอิงโดย URL ถูกบล็อกโดยนโยบาย CORS ของเบราว์เซอร์และจะไม่โหลด Inline style และ CSS ที่ฝังทำงานได้ แต่เค้าโครงซับซ้อนที่มี web font กำหนดเองหรือ CSS grid ขั้นสูงอาจไม่เรนเดอร์ได้ถูกต้อง สำหรับการแปลงหน้าเว็บสมบูรณ์ที่ตรงต้นฉบับ headless browser ที่ทำงานฝั่งเซิร์ฟเวอร์เป็นเครื่องมือที่เหมาะสมกว่า

เขียนโดย Bastien Sulyan

วิธีใช้ HTML เป็น PDF ทีละขั้นตอน

  1. วาง HTML markup ของคุณลงในพื้นที่โปรแกรมแก้ไข
  2. ปรับขนาดหน้า (A4 หรือ Letter) และการวางแนวตามต้องการ
  3. คลิก convert; DOMPurify ทำความสะอาด HTML และ html2canvas เรนเดอร์มัน
  4. รอให้ jsPDF เข้ารหัสผลลัพธ์ canvas เป็นหน้า PDF
  5. ดาวน์โหลด PDF

กรณีการใช้งานที่พบบ่อย

  • คุณสร้างใบแจ้งหนี้ HTML ในเบราว์เซอร์จาก template ท้องถิ่นและต้องการสำเนา PDF โดยไม่ส่งอีเมลไปยังบริการแปลง
  • รายงาน HTML ธรรมดาที่สร้างจากข้อมูล API ต้องการบันทึกเป็น PDF สำหรับการจัดเก็บ วาง HTML แล้วแปลงในท้องถิ่น
  • คุณเขียน template อีเมล HTML ที่มีสไตล์และต้องการดูตัวอย่างว่าจะหน้าตาอย่างไรเมื่อพิมพ์เป็น PDF
  • นักพัฒนาต้องการ PDF ด่วนจาก HTML fragment ระหว่างการทดสอบ โดยไม่ต้องตั้งค่า headless browser ฝั่งเซิร์ฟเวอร์

คำถามที่พบบ่อย

ทำไมข้อความใน PDF ผลลัพธ์จึงเลือกไม่ได้

pipeline การแปลงเรนเดอร์ HTML เป็น canvas bitmap โดยใช้ html2canvas จากนั้นเข้ารหัส bitmap นั้นเป็นข้อมูลภาพภายในหน้า PDF ด้วย jsPDF ผลลัพธ์เป็นภาพ raster ไม่ใช่ชั้นข้อความ หากต้องการ PDF ที่มีข้อความที่เลือกได้ คุณต้องใช้ headless browser ฝั่งเซิร์ฟเวอร์เช่น Puppeteer ซึ่งเครื่องมือนี้หลีกเลี่ยงโดยตั้งใจเพื่อให้การประมวลผลอยู่ในท้องถิ่น

ทำไมภาพใน HTML ของฉันจึงไม่ปรากฏใน PDF

ภาพที่โหลดจาก URL ภายนอกขึ้นอยู่กับนโยบาย CORS ของเบราว์เซอร์ หากเซิร์ฟเวอร์ภาพไม่ส่ง CORS header ที่อนุญาต html2canvas ไม่สามารถอ่านข้อมูล pixel ได้และ slot ภาพจะเรนเดอร์เป็นสีขาว ภาพ base64 ที่เข้ารหัสแบบ inline ที่ฝังโดยตรงใน HTML หรือภาพจาก origin เดียวกันทำงานได้โดยไม่มีข้อจำกัดนี้

HTML ที่ฉันวางถูกส่งไปยังเซิร์ฟเวอร์หรือไม่

ไม่ HTML อยู่ในหน่วยความจำเบราว์เซอร์ตลอดเวลา DOMPurify ทำความสะอาดฝั่งไคลเอนต์ html2canvas เรนเดอร์ฝั่งไคลเอนต์ และ jsPDF เข้ารหัส PDF ฝั่งไคลเอนต์ ไม่มีสิ่งใดออกจากแท็บเบราว์เซอร์

การทำความสะอาด DOMPurify ลบอะไรออก

DOMPurify ลบ script tag, event handler attribute เช่น onclick และ onload, URL ที่ขึ้นต้นด้วย javascript: และ construct อื่นๆ ที่อาจรันโค้ด มันเก็บรักษา markup โครงสร้างและ styling ไว้ ดังนั้นผลลัพธ์ที่เรนเดอร์ดูเหมือนเดิมแต่ปลอดภัยที่จะแทรกในบริบทเอกสาร

ฉันสามารถแปลง URL หน้าเว็บเต็มแทนการวาง HTML ได้หรือไม่

ไม่ เครื่องมือทำงานกับ HTML markup ที่คุณวางโดยตรง การโหลด URL จะต้องดึงหน้า ซึ่งเข้าไปในข้อจำกัด CORS สำหรับไซต์ส่วนใหญ่และจะเกี่ยวข้องกับคำขอเครือข่ายที่นำการดำเนินการออกนอกโมเดลการประมวลผลในท้องถิ่น

เครื่องมือที่เกี่ยวข้อง

เก็บทุกอย่างไว้ในเครื่อง, สำรวจเครื่องมือเสริม

เครื่องมือ PDF ทั้งหมด