ไลบรารีตัวแสดง PDF โอเพ่นซอร์ส JavaScript
ลองใช้ JavaScript API แบบโอเพ่นซอร์สและฟรีนี้เป็นไลบรารี PDF Parser, Viewer, Reader และ Renderer
PDF.js คืออะไร?
PDF.js เป็นไลบรารีโปรแกรมดู PDF แบบโอเพ่นซอร์ส JavaScript และ HTML5 ที่พัฒนาโดย Mozilla ซึ่งอนุญาตให้ดูเอกสาร PDF (Portable Document Format) ในเบราว์เซอร์
PDF.js รองรับคุณสมบัติหลายประการตามรายการด้านล่าง:
- เรนเดอร์ PDF: คุณสามารถเปิดและดู อ่าน หรือเรนเดอร์เอกสาร PDF ในเว็บเบราว์เซอร์
- พิมพ์/บันทึก PDF: PDF.js ยังอนุญาตให้พิมพ์หรือบันทึกเอกสาร PDF จากเว็บเบราว์เซอร์ที่คุณชื่นชอบ
- โหมดการนำเสนอ: เมื่อใช้โหมดการนำเสนอ คุณสามารถแสดงหน้า PDF แบบเต็มหน้าจอ และสามารถนำทางไปยังแต่ละหน้าได้เหมือนกับสไลด์การนำเสนอ
- การนำทาง PDF: PDF.js ให้การควบคุมการนำทางที่ง่ายขึ้น ซึ่งคุณสามารถย้ายไปยังหน้าถัดไปหรือก่อนหน้าได้ คุณยังสามารถข้ามไปยังหน้าที่ต้องการได้อย่างรวดเร็วโดยป้อนหมายเลขของหน้า
- คำอธิบายประกอบ PDF: คุณยังสามารถใส่คำอธิบายประกอบในเอกสาร PDF ได้ด้วยการเพิ่มข้อความ รูปภาพ หรือภาพวาดบนหน้า PDF
- หมุนหน้า PDF: เมื่อใช้ PDF.js คุณสามารถหมุนหน้า PDF ตามเข็มนาฬิกาหรือทวนเข็มนาฬิกาได้
- การเลื่อน PDF: PDF.js มีการควบคุมที่ดีในการเลื่อนหน้าในแนวนอนหรือแนวตั้ง ฯลฯ
- คุณสมบัติเอกสาร PDF: สุดท้ายแต่ไม่ท้ายสุด คุณยังสามารถดูคุณสมบัติของเอกสาร PDF ภายในเบราว์เซอร์โดยใช้โปรแกรมดู PDF.js
เริ่มต้นใช้งาน PDF.js
มีสามวิธีในการรับ PDF.js และเริ่มใช้งานในโครงการเว็บของคุณ
1. สร้างจากแหล่งที่มา
คุณสามารถโคลนที่เก็บ PDF.js จาก GitHub และสร้างได้ด้วยตัวเองหลังจากติดตั้ง Node.js, อึก และการพึ่งพา PDF.js โดยทำตามขั้นตอนด้านล่าง:
โคลนพื้นที่เก็บข้อมูล git PDF.js บนเครื่องท้องถิ่นและสลับไปที่โฟลเดอร์ pdf.js
git clone https://github.com/mozilla/pdf.js.git
cd pdf.js
ติดตั้ง Node.js
https://nodejs.org/en/download
ติดตั้งแพ็คเกจอึกทั่วโลก
npm install -g gulp-cli
ติดตั้งการอ้างอิง PDF.js
npm install
เรียกใช้เซิร์ฟเวอร์ gulp และเปิดโปรแกรมดูในเบราว์เซอร์ที่ http://localhost:8888/web/viewer.html
gulp server
2. ใช้การกระจายที่สร้างไว้ล่วงหน้า
PDF.js ยังนำเสนอการแจกจ่ายที่สร้างไว้ล่วงหน้าพร้อมกับซอร์สโค้ด ซึ่งคุณสามารถดูได้ที่ PDF.js releases บน GitHub . คุณสามารถดาวน์โหลดไลบรารี PDF.js ที่สร้างไว้ล่วงหน้าและเริ่มใช้งานได้
3. ใช้โฮสต์ไลบรารีผ่าน CDN
PDF.js ยังโฮสต์อยู่บนเซิร์ฟเวอร์ CDN ฟรีอีกด้วย มีการแชร์ลิงก์บางส่วนด้านล่าง:
- https://cdnjs.com/libraries/pdf.js
- https://www.jsdelivr.com/package/npm/pdfjs-dist
- https://unpkg.com/pdfjs-dist
เรียกใช้โปรแกรมดู PDF.js
หลังจากที่คุณดาวน์โหลดและแยกไลบรารีการเผยแพร่ที่สร้างไว้ล่วงหน้าจาก GitHub คุณจะพบสองโฟลเดอร์: build และ เว็บ ไฟล์ไลบรารี PDF.js สามารถพบได้ในโฟลเดอร์ build โดยที่โฟลเดอร์ เว็บ มีโปรเจ็กต์โปรแกรมดูที่รวม viewer.html, viewer.css, viewer.js และไฟล์ที่เกี่ยวข้อง หากคุณตรวจสอบโค้ด viewer.html คุณจะเห็นว่ามันอ้างอิงไลบรารี pdf.js จากโฟลเดอร์ build และไฟล์ css และ js อื่น ๆ ที่เกี่ยวข้องเช่นกัน
มาเรียกใช้ viewer.html ในเบราว์เซอร์เพื่อดูว่าโปรแกรมดู PDF.js มีลักษณะอย่างไร:
แสดงผล/ดูเอกสาร PDF
หากต้องการแสดงผลหรือดูเอกสาร PDF ในเบราว์เซอร์โดยใช้ไลบรารีตัวแสดง PDF.js เราต้องรวมไลบรารี PDF.js ไว้ในส่วนหัวของเอกสาร HTML ของเราโดยใช้แท็ก script เพิ่ม canvas > ลงในเนื้อหา HTML จากนั้นเพิ่มโค้ด JavaScript ที่จำเป็นเพื่อใช้ pdfjsLib และสัญญาว่าจะให้ออบเจ็กต์จัดการการโหลดและการแสดงผลเอกสาร PDF แบบอะซิงโครนัส
โค้ดด้านบนเพียงโหลดเอกสาร PDF ในเบราว์เซอร์โดยไม่มีส่วนต่อประสานกับผู้ใช้หรือส่วนควบคุมดังต่อไปนี้:
การสาธิตออนไลน์
ลองใช้ออนไลน์ที่มีคุณลักษณะครบถ้วนนี้ การสาธิต PDF.js Viewer เพื่อสำรวจคุณลักษณะทั้งหมดของไลบรารี PDF.js
บทสรุป
PDF.js เป็นไลบรารีโปรแกรมดู PDF JavaScrpit แบบโอเพ่นซอร์สฟรีพร้อมชุมชนที่เข้มแข็ง ให้การสนับสนุนข้ามเบราว์เซอร์สำหรับเบราว์เซอร์สมัยใหม่และเบราว์เซอร์รุ่นเก่า ใช่ ประสบการณ์ผู้ใช้บนเบราว์เซอร์รุ่นเก่าอาจไม่เหมือนกับเบราว์เซอร์สมัยใหม่ แต่ก็ยังดีเหมือนเป็นไลบรารี่ฟรี มีความปลอดภัยและปรับแต่งได้ คุณสมบัติมีจำกัด แต่ในฐานะโปรแกรมดู PDF มันใช้งานได้ดี
PDF.js มี API และสถาปัตยกรรมที่ดีเพื่อสร้างโปรแกรมดู PDF บนเว็บ เนื่องจากการเพิ่มการควบคุม UI ให้กับวิวเวอร์นั้นใช้เวลานาน ดังนั้นเพื่อประหยัดเวลาของนักพัฒนา PDF.js จึงได้จัดเตรียมซอร์สโค้ดของ PDF veiwer ที่มีฟังก์ชันการทำงานเต็มรูปแบบและเต็มไปด้วยฟีเจอร์ต่างๆ ซึ่งคุณสามารถพบได้ (ตรวจสอบ viewer.html, viewer.js และ viewer.css ฯลฯ) ในโฟลเดอร์ เว็บ ของแพ็คเกจการแจกจ่ายไลบรารี PDF.js
