مكتبة JavaScript مجانية لعرض مستندات EPUB

افتح مكتبة جافا سكريبت المصدر للوصول إلى مستندات EPUB وعرضها في المستعرض وعبر الأجهزة الأخرى.

تبحث عن مكتبة سهلة الاستخدام يمكنها عرض مستندات EPUB داخل المتصفح وكذلك عبر العديد من الأجهزة الأخرى. Epub.js هي مكتبة JavaScript مفتوحة المصدر قوية جدًا تتيح للمبرمجين والتطبيقات الوصول إلى مستندات EPUB وعرضها في المتصفح بسهولة. EPUB هو تنسيق ملف كتاب إلكتروني شائع جدًا ويستخدمه الناشرون والمستهلكون على نطاق واسع. وهو مدعوم من قبل العديد من برامج القراءة الإلكترونية وتطبيقات البرامج عبر عالم الإنترنت ويمكن تحويله إلى العديد من التنسيقات الأخرى (مثل PDF و Mobi و iBooks).

يعد Epub.js مفيدًا جدًا في التعامل مع الكتب الإلكترونية حيث أنه يوفر واجهة لوظائف الكتاب الإلكتروني الشائعة مثل العرض والمثابرة والصفحات وما إلى ذلك. هناك العديد من طرق العرض المهمة في جزء منها مثل الطريقة الافتراضية التي تعرض قسمًا واحدًا فقط في كل مرة. يمكن استخدام المدير المستمر لإظهار أكبر عدد ممكن من الأقسام حسب الحاجة لملء الشاشة ، وتحميل القسم التالي خارج الشاشة مسبقًا. يعتمد قسم تجاوز التدفق على الإعدادات الموجودة في OPF ، ويتم تعيينه افتراضيًا على ترقيم الصفحات.

تضمنت المكتبة العديد من الميزات المهمة للعمل مع مستندات EPUB ، مثل البحث داخل مستند EPUB بأكمله ، والبحث في الفصل الحالي ، والتمرير السريع لقلب الصفحات ، وإنشاء المواقع وحفظها ، وتقليب الصفحات باستخدام مفاتيح الأسهم وغيرها الكثير.

Previous Next

الشروع في العمل مع Epub.js

يتوفر Epub.js في npm ، تحتاج أولاً إلى تثبيت node.js ثم يمكنك تثبيت Epub.js على جهازك. الرجاء استخدام الأمر التالي للتثبيت السلس.

قم بتثبيت Epub.js عبر npm

 npm install

يمكنك أيضًا تثبيته يدويًا ؛ تنزيل أحدث ملفات الإصدار مباشرةً من مستودع GitHub .

تقديم مستندات EPUB بطرق مختلفة عبر JavaScript

تتيح مكتبة Epub.js مفتوحة المصدر لمبرمجي البرامج إمكانية عرض مستندات EPUB بطرق مختلفة داخل تطبيقات JavaScript الخاصة بهم. تقدم المكتبة طريقتين مختلفتين للعرض ، بما في ذلك الافتراضي والمستمر. يمكن استخدام طريقة العرض الافتراضية لعرض قسم واحد في كل مرة. من ناحية أخرى ، يمكن استخدام الوضع المستمر لعرض أقسام متعددة حسب الحاجة لملء الشاشة وتحميل القسم التالي خارج الشاشة مسبقًا.

تقديم مستندات EPUB بمكتبة جافا بطرق مختلفة


// Default Rendering
book.renderTo("area", { method: "default", width: "100%", height: "100%" });
// Continuous Rendering
book.renderTo("area", { method: "continuous", width: "100%", height: "100%" });
//Flow Overrides Paginated
book.renderTo("area", { flow: "paginated", width: "900", height: "600" });
//Scrolled: 
book.renderTo("area", { flow: "scrolled-doc" });

تطبيق الخطافات في مستندات EPUB في تطبيقات JavaScript

تضمنت مكتبة Epub.js ميزة مفيدة جدًا تشبه المكونات الإضافية للتفاعل مع محتويات الكتاب ومعالجتها. تقوم المكتبة بتنفيذ الأحداث التي يمكن أن ترتبط بها بسهولة. على سبيل المثال ، يمكن للمستخدمين تحميل مقاطع الفيديو مباشرة من روابط YouTube قبل تنفيذ التعليقات التوضيحية أو عرض محتويات أحد الفصول. احتاج الخطاف إلى حدث للتسجيل فيه ويمكن لـ a أن يعيد وعدًا بالحظر حتى يتم الانتهاء منه.

كيفية تحميل مقاطع الفيديو من روابط YouTube عبر Java API

  rendition.hooks.content.register(function(contents, view) {
    var elements = contents.document.querySelectorAll('[video]');
    var items = Array.prototype.slice.call(elements);
    items.forEach(function(item){
      // do something with the video item
    });
})

معالجة مستندات EPUB عبر JavaScript

يوفر Epub.js مفتوح المصدر وظائف كاملة لإنشاء مستندات EPUB جديدة ومعالجتها ببضعة سطرين فقط من كود JavaScript. الملف بامتداد .epub هو مجرد ملف مضغوط يحتوي على مجموعة من HTML والصور والبيانات الوصفية حول كتابك الإلكتروني. تسمح المكتبة بتحديد CSS وخطوط مخصصة لتصميم المستند. يوفر العديد من الوظائف المهمة للبحث في الكتاب بأكمله أو البحث في فصل حالي ، وانتقد لتحويل الصفحات ، وإنشاء المواقع وحفظها وما إلى ذلك.

مرر سريعًا لتحويل الصفحات في مستندات EPUB باستخدام Java API

 rendition.on("displayed", event => {
    let start = null;
    let end = null;
    const el = event.document.documentElement;
    el.addEventListener('touchstart', event => {
        start = event.changedTouches[0];
    });
    el.addEventListener('touchend', event => {
        end = event.changedTouches[0];
        let hr = (end.screenX - start.screenX) / el.getBoundingClientRect().width;
        let vr = (end.screenY - start.screenY) / el.getBoundingClientRect().height;
        if (hr > vr && hr > 0.25) return rendition.prev();
        if (hr < vr && hr < -0.25) return rendition.next();
        if (vr > hr && vr > 0.25) return;
        if (vr < hr && vr < -0.25) return;
    });
});
 عربي