1. Products
  2.   eBook
  3.   JavaScript
  4.   Epub.js
 
  

Free JavaScript Library for EPUB Documents Rendering

Open Source JavaScript Library to access and render EPUB documents in the browser & across other devices.

Looking for simple to use library that can render EPUB documents inside the browser as well as across many other devices. Epub.js is a very powerful open source JavaScript library that allows programmers and applications to access and rendering EPUB documents in the browser with ease. EPUB is a very popular EBook file format that is widely used by publishers & consumers. It is supported by many e-readers and software applications across the internet world and is convertible to many other formats (such as PDF, Mobi and iBooks).

The Epub.js is very useful for handling eBooks as it provides an interface for common eBook functionalities like rendering, persistence and pagination etc. There are several important rendering methods part of the such as the default method only displays a single section at a time. The continuous manager can be used to show as many sections as need to fill the screen, and preload the next section off-screen. The flow override section is based on the settings in the OPF, defaults to paginated.

The library has included several important features for working with EPUB documents, such as searching inside the entire EPUB document, searching the current chapter, swipe to turn pages, generating and saving locations, turning pages with arrow keys and many more.

Previous Next

Getting Started with Epub.js

Epub.js is available at npm, First you need to install node.js and then can install Epub.js on your machine. Please use the following command for smooth installation.

Install Epub.js via npm

 npm install

You can also install it manually; download the latest release files directly from GitHub repository.

Render EPUB Documents in Various Ways via JavaScript

The open source Epub.js library enables software programmers to render EPUB Documents in various ways inside their own JavaScript applications. The library offers two different render methods, including default and continuous. The default rendering method can be used to displays a single section at a time. On the other hand the continuous mode can be used to display multiple sections as per the need to fill the screen and preload the next section off-screen.

Render EPUB Documents in Various Waysvia Java Library


// 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" });

Apply Hooks in EPUB Documents in JavaScript Apps

The Epub.js library has included a very useful feature similar to plugins for interacting with and manipulating the contents of the book. The library implements events into which you can be easily hooked. For example users can directly loading videos from YouTube links before implementing annotation or displaying a chapter’s contents. Hooks needed an event to register to and a can return a promise to block until they are finished.

How to Load Videos from YouTube links via 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
    });

})

Manipulating EPUB Documents via JavaScript

The open source Epub.js has provided complete functionality for creating new EPUB Documents and manipulating it with just a couple of lines of JavaScript code. A file with .epub extension is just a zip file containing a bunch of HTML, images, and metadata about your eBook. The library allows specifying custom CSS and fonts for styling the document. It provides several important functions for search the entire book or search a current chapter, swipe to turn pages, generating and saving locations and so on.

Swipe to Turn Pages in EPUB Documents using 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;
    });
});
 English