HTML เป็น PDF

วิธีแปลง HTML เป็น PDF ในสามขั้นตอน

ขั้นตอนแรก วาง markup ของท่านหรือนำเข้าไฟล์ .html ที่บันทึกไว้ markup จะถูกจัดวางในเฟรมของตนเองแยกจากหน้านี้ ดังนั้นสไตล์ของหน้านี้จะไม่ปนกับสไตล์ของท่าน ท่านสามารถลากและวางไฟล์หรือคลิกเพื่อเลือกจากอุปกรณ์

ขั้นตอนที่สอง ตรวจสอบตัวอย่างเพื่อให้แน่ใจว่าลักษณะถูกต้อง เบราว์เซอร์จะแสดงผล จากนั้นแต่ละหน้าของ PDF สุดท้ายจะเป็นภาพ PNG จากผลการแสดงผลนั้น การแสดงผลทำงานที่สองเท่าของขนาดสุดท้าย ประมาณ 144 dpi เพียงพอสำหรับหน้าจอและเครื่องพิมพ์สำนักงาน แต่สำหรับการพิมพ์เชิงพาณิชย์จะเริ่มเห็นพิกเซล

ขั้นตอนที่สาม คลิกดาวน์โหลดเพื่อบันทึก PDF โดยตรงจากหน่วยความจำ เครื่องมือนี้ฟรีและปลอดภัย ไม่ต้องติดตั้ง ไม่ต้องสมัครสมาชิก และ HTML ของท่านไม่เคยออกจากแท็บนี้ โปรดทราบตั้งแต่ต้น ข้อความไม่สามารถเลือกได้ Ctrl+F ไม่พบสิ่งใดในผลลัพธ์ และโปรแกรมอ่านหน้าจอจะไม่ได้รับสิ่งใด

เมื่อใดภาพแรสเตอร์จึงเป็นคำตอบที่เหมาะสม

การแรสเตอร์ไม่เหมาะสำหรับสัญญาที่ต้องให้ผู้อื่นค้นหาข้อความ แต่เหมาะเมื่อลักษณะของหน้าเป็นสิ่งสำคัญ

การวาง Markup ไม่เหมือนกับการเปิดไฟล์

ปุ่มนำเข้า .html จะอ่านเฉพาะข้อความจากไฟล์นั้นเท่านั้น ไม่มากกว่านั้น สไตล์ชีตข้างเคียง โลโก้ใน ./images ฟอนต์เว็บใน ./fonts จะไม่ติดมาด้วย เพราะเบราว์เซอร์จะไม่มอบดิสก์ส่วนที่เหลือของท่านให้หน้าเว็บ

เส้นทางสัมพัทธ์จะล้มเหลวอย่างเงียบๆ markup ของท่านถูกแสดงผลที่นี่ ไม่ใช่ในโฟลเดอร์ที่บันทึกไฟล์ ดังนั้น src="logo.png" จะถูกอ่านเทียบกับ oxygenpdf.com แล้วไม่พบสิ่งใด URL แบบ https:// จะโหลดได้หากเซิร์ฟเวอร์ส่งคืนส่วนหัว CORS

สคริปต์จะไม่ทำงาน markup ที่เพิ่มด้วยวิธีนี้จะไม่เรียกใช้แท็กสคริปต์ ดังนั้นแอปหน้าเดียวที่บันทึกจากเบราว์เซอร์จะแสดงเกือบว่างเปล่า สิ่งที่ท่านบันทึกคือโครง ไม่ใช่ผลการแสดงผล คัดลอก DOM ที่ใช้งานจริงจากตัวตรวจสอบองค์ประกอบแล้ววางแทน สิ่งที่ติดมาอย่างเชื่อถือได้คือสิ่งที่อยู่ในตัวเอง บล็อกสไตล์ในไฟล์ แอตทริบิวต์สไตล์ inline และภาพที่เขียนเป็น data URI

การเปรียบเทียบ

สามวิธีนำ HTML ลง PDF พร้อมข้อจำกัดของแต่ละวิธี

สิ่งที่คงอยู่ และตำแหน่งที่หน้าถูกตัด

สี การไล่สี เส้นขอบ มุมโค้งมน เงากล่อง ความทึบ การแปลง CSS เงาข้อความ ตาราง รายการ และ SVG แบบ inline ทั้งหมดคงอยู่ ตัวแสดงผลวาดแต่ละกล่องใหม่เองแทนการขอภาพหน้าจอจากระบบปฏิบัติการ ดังนั้นเอฟเฟกต์ใหม่บางอย่างที่ไม่มีเทียบตรงจะถูกทิ้งโดยไม่มีเตือน ได้แก่ filter และ blur() mix-blend-mode backdrop-filter clip-path และมาสก์

markup ของท่านถูกจัดวางในวิวพอร์ตกว้างประมาณ 515 พิกเซล ซึ่งเป็นความกว้างเนื้อหา A4 ที่วัดเป็นพิกเซล CSS ดังนั้นหน้าแบบตอบสนองจะแสดงผลที่เบรกพอยต์แคบ และกฎ @media (min-width: 768px) จะไม่ทำงาน หากเค้าโครงของท่านดูถูกต้องเฉพาะเหนือ 768 พิกเซล ที่นี่จะไม่ดูถูกต้อง

ภาพสุดท้ายที่ยาวจะถูกตัดเป็นชิ้นสูงเท่าหน้าในช่วงคงที่ การตัดเป็นเชิงกลและไม่สนใจเนื้อหาด้านล่าง ดังนั้นแถวตารางหรือหัวข้ออาจคาบเกี่ยวครึ่งหนึ่งในหน้าหนึ่งและอีกครึ่งในหน้าถัดไป กฎ page-break-inside ของ CSS ไม่ช่วย ให้เลื่อนองค์ประกอบที่คร่อมเส้นด้วยระยะขอบเพิ่มเติมหรือตัวเว้นว่าง เนื้อหาประมาณ 762 พอยต์พอดีในแต่ละหน้า

HTML ของท่านไม่เคยออกจากแท็บนี้

ตัวแปลงฝั่งเซิร์ฟเวอร์ทุกตัวต้องการ markup ของท่านบนเครื่องของตน ไม่ว่าท่านจะวางลงแบบฟอร์มแล้วอัปโหลด หรือท่านให้ URL แล้วโปรแกรมรวบรวมข้อมูลมาดึงหน้า สำหรับเนื้อหาหลังการเข้าสู่ระบบ วิธีที่สองหมายถึงการมอบข้อมูลประจำตัวด้วย ทั้งสองวิธีไม่ใช่การแลกเปลี่ยนที่สะดวกสำหรับหน้าจอที่เต็มไปด้วยชื่อลูกค้า หรือสำหรับบิลด์ staging ที่ยังไม่เผยแพร่

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