مكتبة عارض 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. إذا أرجعت القيمة true مما يشير إلى أنها تدعم تضمين PDF في HTML، فسنقوم بتضمين ملف PDF في HTML باستخدام طريقة embed("document_name.pdf","#elementid"). ستضمّن هذه الوظيفة ملف PDF في عنصر محدد في HTML. لتضمين ملف PDF بالحجم الكامل، لن نذكر أي معرف عنصر وسنستدعي الطريقة كـ embed("document_name.pdf"). ومع ذلك، إذا أرجعت القيمة false مما يشير إلى أنها لا تدعم تضمين 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: { 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 في صفحات الويب.
