ไลบรารีตัวแสดง 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 หรือไม่ หากคืนค่าเป็น "จริง" ซึ่งบ่งชี้ว่ารองรับการฝัง PDF ใน HTML เราจะฝัง PDF ใน HTML โดยใช้เมธอด embed("document_name.pdf","#elementid") ฟังก์ชั่นนี้จะฝัง PDF ไว้ในองค์ประกอบเฉพาะใน HTML สำหรับการฝัง PDF ขนาดเต็ม เราจะไม่กล่าวถึงรหัสองค์ประกอบใดๆ และจะเรียกเมธอดเป็น embed("document_name.pdf") อย่างไรก็ตาม หากคืนค่าเป็นเท็จ ซึ่งบ่งชี้ว่าไม่รองรับการฝัง 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: { parameter }}) เพื่อฝังเอกสาร 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 ในหน้าเว็บ
