ספריית JavaScript PDF Viewer בקוד פתוח

מה זה PDFObject?

PDFObject היא ספריית JavaScript חינמית וקוד פתוח שפותחה להטמעת מסמכי PDF בדפי אינטרנט. זה עובד על ידי יצירת אלמנט הטמעת HTML ואז שילובו במבנה ה-HTML. רכיב ההטמעה לאחר מכן מעבד את מסמך ה-PDF. PDFObject אינו מעבד בעצמו; אלא הוא מתמקד ביצירת אלמנט ההטמעה והצבתו בתוך ה-HTML. זה יכול ליצור רכיבי הטבעה להצגת קובצי PDF בגודל מלא או בתוך חלקים שצוינו בדף האינטרנט.

להלן כמה מהתכונות העיקריות של PDFObject:

• מנגנון חילוץ: ל-PDFObject יש מנגנון חילוף, כך שבמקרים שבהם הדפדפן אינו תומך בהטמעת קובצי PDF, PDFObject מפעיל אוטומטית את לוגיקית ה-Fallback המאפשרת למפתחים לספק קישור ל-PDF או כל היגיון חלופי אחר לפי הצורך .
• שילוב PDF.js: PDFObject מספק אינטגרציה אופציונלית עם PDF.js, המאפשר למפתחים להטמיע קובצי PDF ללא קשר ל-PDF ברירת המחדל של הדפדפן צוֹפֶה. תכונה זו שימושית כאשר הדפדפן אינו תומך בהטמעת מסמכי PDF ב-HTML.
• PDF Open Parameters: PDFObject תומך בPDF Open Parameters הקנייני של Adobe המאפשר למפתחים לציין פרמטרים להצגת PDF. זה כולל אפשרויות כמו מצב תצוגה והגדרות אחרות ספציפיות ל-Adobe. את כל הפרמטרים הללו ניתן למצוא כאן.

סטטיסטיקות GitHub

שֵׁם:
שפה:
כוכבים:
מזלגות:
רישיון:
המאגר עודכן לאחרונה ב

תחילת העבודה עם PDFObject

אנו יכולים להוריד את ספריית PDFObject באמצעות מודול 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 בגודל מלא לא נזכיר שום מזהה אלמנט ונקרא לשיטה כembed("document_name.pdf"). עם זאת, אם הוא מחזיר false המציין שהוא אינו תומך בהטמעת PDF ב-HTML, נעבור ללוגיקה חלופית אחרת לפי הצורך. בדוק את קטע הקוד למטה לקבלת הפרטים:

תְפוּקָה

הפלט הבא מציג את מסמך ה-PDF המוטבע ב-HTML:

צור מנגנון נפילה

אנו יכולים להקים מנגנון fallback תוך הטמעת 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. הוא אמנם לא מתפקד כמעבד ומסתמך על תמיכת הדפדפן ברכיבי הטמעה שעלולים לגרום לבעיות כמו ממשק משתמש שבור בדפדפנים שאינם תומכים ברכיב הטמעה, אך לספרייה יש תכונות לפתרון בעיות כאלה באמצעות זיהוי התמיכה שלה עבור הטמעת אלמנט ומנגנון החזרה. אנו יכולים גם להציג קובצי PDF בדפדפנים שאינם תומכים ברכיבי הטבעה על ידי שילוב PDF.js עם PDFObject. למרות מגבלותיו, PDFObject בולט ככלי בעל ערך, להטמעה ולעיבוד מסמכי PDF בדפי אינטרנט.

מוצרים דומים