ספריית JavaScript PDF Viewer בקוד פתוח
נסה את ממשק API זה של JavaScript בחינם וקוד פתוח כספריית PDF מנתח, Viewer, Reader ו-Renderer.
מה זה PDF.js?
PDF.js היא ספריית צפייה PDF מבוססת JavaScript ו-HTML5 בקוד פתוח שפותחה על ידי Mozilla, המאפשרת צפייה במסמכי PDF (פורמט מסמכים ניידים) בדפדפן.
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, gulp תלות ו-PDF.js על ידי ביצוע השלבים הבאים:
שכפל מאגר PDF.js git במחשב מקומי ועבור לתיקיית pdf.js
git clone https://github.com/mozilla/pdf.js.git
cd pdf.js
התקן את Node.js
https://nodejs.org/en/download
התקן את חבילת gulp ברחבי העולם
npm install -g gulp-cli
התקן תלויות PDF.js
npm install
הפעל שרת לגימה ופתח את המציג בדפדפן בכתובת http://localhost:8888/web/viewer.html
gulp server
2. השתמש בהפצה בנויה מראש
PDF.js מציע גם הפצות מובנות מראש יחד עם קוד מקור שתוכל למצוא בגרסאות PDF.js ב-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 Viewer
לאחר הורדת וחילוץ ספריית הפצה בנויה מראש מGitHub, תמצא שתי תיקיות: build ואינטרנט. ניתן למצוא קבצי ספריית PDF.js בתיקיית build כאשר תיקיית web מכילה פרויקט צופה הכולל viewer.html, viewer.css, viewer.js וקבצים קשורים. אם תבדוק את קוד viewer.html, אתה יכול לראות שהוא מפנה לספריית pdf.js מתיקיית build וקבצי css ו-js קשורים אחרים.
בואו נריץ את viewer.html בדפדפן כדי לראות איך נראה PDF.js viewer:
עיבוד/הצג מסמכי PDF
כדי פשוט לעבד או להציג מסמך PDF בדפדפן באמצעות ספריית הצופה PDF.js, עלינו לכלול את ספריית PDF.js בכותרת מסמך ה-HTML שלנו באמצעות תג script, להוסיף קנבס > לגוף HTML ולאחר מכן הוסף קוד JavaScript הכרחי כדי להשתמש בpdfjsLib ולהבטיח לאובייקטים לטפל בטעינה ורינדור אסינכרוני של מסמך ה-PDF.
הקוד שלמעלה פשוט טוען מסמך PDF בדפדפן ללא ממשק משתמש או פקדים כמפורט להלן:
הדגמה מקוונת
נסה את הדגמה המקוונת הזו הדגמה של PDF.js Viewer כדי לחקור את כל התכונות של ספריית PDF.js.
סיכום
PDF.js היא ספריית מציג JavaScrpit PDF בחינם וקוד פתוח עם קהילה חזקה. הוא מספק תמיכה בין דפדפנים לדפדפנים מודרניים וגם לדפדפנים מדור קודם. כן, חווית משתמש בדפדפנים מדור קודם עשויה להיות לא זהה לדפדפנים המודרניים, אבל היא עדיין טובה כספרייה חינמית. זה מאובטח וניתן להתאמה אישית. התכונות מוגבלות אך כצופה PDF, זה עובד נהדר.
PDF.js מספק ממשקי API וארכיטקטורה נחמדים לבניית מציג PDF מבוסס אינטרנט. מכיוון שלוקח זמן להוסיף עוד פקדי ממשק משתמש לצופה כדי לחסוך זמן למפתחים, PDF.js מספק גם קוד מקור של תצוגה מפורטת של PDF פונקציונלית מלאה ועתירת תכונות שתוכל למצוא (בדוק viewer.html, viewer.js ו- viewer.css וכו') בתיקיית web של חבילת ההפצה של ספריית PDF.js.
