مكتبة عارض 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 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، فسيتم تنفيذ التعليمات البرمجية الموجودة في الرابط الاحتياطي في عنصر div المخصص. تحقق من مقتطف الكود أدناه للحصول على التفاصيل:

انتاج

تعرض لقطة الشاشة الناتجة المحتوى المعروض بواسطة الآلية الاحتياطية. تم تنشيط الآلية الاحتياطية عندما لا يدعم المتصفح تضمين ملفات PDF بتنسيق HTML.

قم بتضمين ملف PDF باستخدام معلمات Adobe PDF المفتوحة

يمكننا تضمين ملفات PDF مع بعض معلمات الفتح باستخدام مكتبة PDFObject. سنستخدم الطريقة PDFObject.embed("myfile.pdf", "#my-container", {pdfOpenParams: { بارامترات }}) لتضمين مستند 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 هي مكتبة جافا سكريبت سهلة الاستخدام لتضمين مستندات PDF في HTML. على الرغم من أنها لا تعمل كعارض وتعتمد على دعم المتصفح لعناصر التضمين التي يمكن أن تسبب مشكلات مثل واجهة المستخدم المعطلة في المتصفحات التي لا تدعم عنصر التضمين، إلا أن المكتبة لديها ميزات لحل مثل هذه المشكلات من خلال اكتشاف الدعم لـ تضمين العنصر والآلية الاحتياطية. يمكننا أيضًا عرض ملفات PDF في المتصفحات التي لا تدعم عناصر التضمين عن طريق دمج PDF.js مع PDFObject. على الرغم من القيود المفروضة عليه، يبرز PDFObject كأداة قيمة لتضمين مستندات PDF وعرضها في صفحات الويب.

منتجات مماثلة