ไลบรารี่อ่าน PDF แบบโอเพ่นซอร์สของ JavaScript
ไลบรารี JavaScript โอเพนซอร์สและฟรีสำหรับดูเอกสาร PDF
PDFObject คืออะไร?
PDFObject เป็นไลบรารี JavaScript แบบโอเพนซอร์สที่ให้บริการฟรีซึ่งพัฒนาขึ้นเพื่อฝังเอกสาร PDF ลงในหน้าเว็บ โดยไลบรารีนี้ทำงานโดยสร้างองค์ประกอบฝัง HTML แล้วผสานรวมเข้ากับโครงสร้าง HTML จากนั้นองค์ประกอบฝังจะแสดงผลเอกสาร PDF PDFObject ไม่ใช่โปรแกรมแสดงผล แต่เน้นที่การสร้างองค์ประกอบฝังและวางไว้ใน HTML โดยสามารถสร้างองค์ประกอบฝังเพื่อแสดง PDF ในขนาดเต็มหรือในส่วนที่ระบุของหน้าเว็บได้
ต่อไปนี้คือคุณสมบัติหลักบางประการของ PDFObject:
- กลไกการสำรองข้อมูล: PDFObject มีกลไกการสำรองข้อมูล ดังนั้นในกรณีที่เบราว์เซอร์ไม่รองรับการฝัง PDF นั้น PDFObject จะเปิดใช้งานตรรกะการสำรองข้อมูลโดยอัตโนมัติ ช่วยให้นักพัฒนาสามารถให้ลิงก์ไปยัง PDF หรือตรรกะทางเลือกอื่นๆ ตามต้องการได้
- การผสานรวม PDF.js: PDFObject มีตัวเลือกการผสานรวมกับ PDF.js ซึ่งทำให้ผู้พัฒนาสามารถฝัง PDF ได้โดยไม่คำนึงถึงโปรแกรมอ่าน PDF เริ่มต้นของเบราว์เซอร์ คุณสมบัตินี้มีประโยชน์เมื่อเบราว์เซอร์ไม่รองรับการฝังเอกสาร PDF ใน HTML
- พารามิเตอร์การเปิด PDF: PDFObject รองรับ พารามิเตอร์การเปิด PDF ที่เป็นกรรมสิทธิ์ของ Adobe ซึ่งช่วยให้ผู้พัฒนาสามารถระบุพารามิเตอร์สำหรับการแสดง PDF ได้ ซึ่งรวมถึงตัวเลือกต่างๆ เช่น โหมดการดูและการตั้งค่าเฉพาะของ Adobe อื่นๆ พารามิเตอร์ทั้งหมดนี้สามารถพบได้ ที่นี่
เริ่มต้นใช้งาน PDFObject
เราสามารถดาวน์โหลดไลบรารี PDFObject ได้โดยใช้โมดูล npm:
ติดตั้งโดยใช้ NPM
npm i pdfobject
ฝัง PDF ลงใน HTML ด้วยการตรวจสอบการรองรับเบราว์เซอร์
เราสามารถฝังเอกสาร PDF ลงใน HTML ได้โดยใช้ไลบรารี PDFObject ในขั้นแรก เราจะตรวจสอบว่าเบราว์เซอร์รองรับการฝังเอกสาร PDF ลงใน HTML หรือไม่โดยใช้เมธอด supportsPDFs ของไลบรารี PDFObject หากส่งคืนค่า true ซึ่งแสดงว่ารองรับการฝัง PDF ลงใน HTML เราจะฝัง PDF ลงใน HTML โดยใช้เมธอด embed("document_name.pdf","#elementid") ฟังก์ชันนี้จะฝัง PDF ลงในองค์ประกอบเฉพาะใน HTML สำหรับการฝัง PDF ขนาดเต็ม เราจะไม่ระบุ ID องค์ประกอบใดๆ และจะเรียกใช้เมธอดเป็น embed("document_name.pdf") อย่างไรก็ตาม หากส่งคืนค่า false ซึ่งแสดงว่าไม่รองรับการฝัง PDF ลงใน HTML เราจะเปลี่ยนไปใช้ตรรกะทางเลือกอื่นตามความจำเป็น ตรวจสอบตัวอย่างโค้ดด้านล่างเพื่อดูรายละเอียด:
เอาท์พุต
ผลลัพธ์ต่อไปนี้จะแสดงเอกสาร PDF ที่ฝังอยู่ใน HTML:
สร้างกลไกสำรอง
เราสามารถสร้างกลไกสำรองขณะฝัง PDF ลงในเว็บเพจได้โดยใช้ PDFObject ซึ่งจะเปิดใช้งานเมื่อเบราว์เซอร์ไม่รองรับการฝัง PDF ใน HTML PDFObject ใช้พารามิเตอร์ที่เรียกว่า fallbackLink ซึ่งมีตรรกะทางเลือกขณะเรียกใช้ฟังก์ชัน embed ดังนั้น หากเบราว์เซอร์ไม่รองรับการฝัง PDF โค้ดที่อยู่ใน fallbackLink จะถูกดำเนินการในองค์ประกอบ div ที่กำหนด ดูรายละเอียดได้จากตัวอย่างโค้ดด้านล่าง:
เอาท์พุต
ภาพหน้าจอที่แสดงออกมาจะแสดงเนื้อหาที่แสดงโดยกลไกสำรอง กลไกสำรองจะเปิดใช้งานเมื่อเบราว์เซอร์ไม่รองรับการฝัง PDF ใน HTML
ฝัง PDF ด้วยพารามิเตอร์เปิด PDF ของ Adobe
เราสามารถฝัง PDF พร้อมกับพารามิเตอร์การเปิดบางอย่างได้โดยใช้ไลบรารี PDFObject เราจะใช้เมธอด PDFObject.embed("myfile.pdf", "#my-container", {pdfOpenParams: { parameters }}) เพื่อฝังเอกสาร PDF ลงใน HTML พร้อมกับพารามิเตอร์การเปิด พารามิเตอร์การเปิด PDF เหล่านี้ประกอบด้วยฟีเจอร์ต่างๆ เช่น การเปิด PDF และการเลื่อนไปยังหมายเลขหน้าที่ต้องการ ดูรายละเอียดได้จากโค้ดด้านล่าง:
เอาท์พุต
ภาพหน้าจอต่อไปนี้แสดงเอกสาร PDF ที่ฝังอยู่ใน HTML พร้อมพารามิเตอร์เพิ่มเติมที่ทำให้องค์ประกอบฝังเลื่อนไปที่หมายเลขหน้า 3 หลังจากเรนเดอร์แล้ว:
ฝัง PDF โดยบูรณาการ PDF.js
ตามที่เราทราบ PDFObject ขึ้นอยู่กับการรองรับของเบราว์เซอร์ในการฝัง PDF ลงใน HTML แต่ก็มีวิธีอื่นในการแสดงผล PDF หากเบราว์เซอร์ไม่รองรับ วิธีอื่นคือการรวม PDF.js เข้ากับ PDFObject เพื่อดำเนินการนี้ เราจะต้องตั้งค่า PDF.js บนเซิร์ฟเวอร์ของเรา จากนั้นจึงส่งพารามิเตอร์ ForcePDFJS: true และ PDFJS_URL: path/to/viewer.html/in/pdf.js ไปยังฟังก์ชัน embed
หมายเหตุ: ในตัวอย่างโค้ดด้านล่าง เราได้สร้างและเริ่มต้นเซิร์ฟเวอร์ที่มีไลบรารี PDF.js ดังนั้น http://localhost:8888 จึงชี้ไปที่ไลบรารี PDF.js
เอาท์พุต
ภาพหน้าจอต่อไปนี้แสดงเอกสาร PDF ที่แสดงผลโดยบูรณาการ PDFObject กับ PDF.js:
บทสรุป
โดยสรุป PDFObject เป็นไลบรารี JavaScript ที่ใช้งานง่ายสำหรับการฝังเอกสาร PDF ลงใน HTML แม้ว่าจะไม่ได้ทำหน้าที่เป็นตัวแสดงผลและต้องอาศัยการสนับสนุนของเบราว์เซอร์สำหรับองค์ประกอบที่ฝังไว้ ซึ่งอาจทำให้เกิดปัญหา เช่น UI เสียหายในเบราว์เซอร์ที่ไม่รองรับองค์ประกอบที่ฝังไว้ แต่ไลบรารีนี้มีคุณลักษณะในการแก้ไขปัญหาเหล่านี้ผ่านการตรวจจับการสนับสนุนสำหรับองค์ประกอบที่ฝังไว้และกลไกสำรอง เราสามารถเรนเดอร์ PDF ในเบราว์เซอร์ที่ไม่รองรับองค์ประกอบที่ฝังไว้ได้โดยการผสาน PDF.js เข้ากับ PDFObject แม้จะมีข้อจำกัด แต่ PDFObject ก็โดดเด่นในฐานะเครื่องมือที่มีคุณค่าในการฝังและเรนเดอร์เอกสาร PDF ในหน้าเว็บ
