How can I implement an EPUB reader in JavaScript?

Question

I'm wondering if I can create an EPUB (free and open e-book standard) reader in JavaScript. The basic requirements would be:

1. Server parts of the EPUB reader from a server API.
2. Read the EPUB data in JavaScript.
3. Render it on page.
4. Provide some extra functionality, like text highlights or page notes.

I have no information about how I could do this. I'm willing to try a prototype project. What are the steps that I could take towards implementing such a thing?

Answer 1

From your comments, it seems like you are at a very early conceptual stage, and want general guidance... well, that's going to be very difficult to give, since the entire topic is quite large. But in general, what you want to do is:

1. Read in and parse an epub file using javascript.
2. Generate HTML which represents the contents (and inline images / SVG / etc).

Well, that's at a very high level, and doesn't help us much. You can break down step 1 by reading up on the epub format itself (e.g.: wikipedia article and general info). Pretty quickly, you should notice that the format uses OCF to package together multiple files, so your first problem will be to create an OCF reader, which also means that you will need to be able to unzip the data in javascript (Florian Margaine's links should give you an idea of how others have solved this problem). At this point, I'd start looking for existing implementations in javascript, because you probably don't want to be implementing all of this from the ground up. This is all before we're even touching the actual contents of the epub file. Once you are past this point, you should be able to read in the actual contents, and attempt to translate them into HTML.

Regarding step 2, I'd start by looking at the various features provided by epub - text, CSS styling, embedded images, etc - and start attacking those one at a time, starting with whatever gives the most return for my time (probably text...).

Answer 2

TreineticEpubReader is a popular fork of readium-js-viewer it provides a very simple api to interact with epub files, you can load either the epub as .epub or serve the extracted folder path of the epub

https://github.com/Treinetic/TreineticEpubReader

Library is pure javascript so you can blend and mix with any modern framework, here is a sample code, you can also look at the sample folder inside the dist to find a working demo

<div id="epub-reader-frame"></div>

var exControls = TreineticEpubReader.handler();
exControls.registerEvent("onEpubLoadSuccess", function () {

});

exControls.registerEvent("onEpubLoadFail", function () {

});

exControls.registerEvent("onTOCLoaded", function (hasTOC) {
    if (!hasTOC) {
       let toc =  exControls.getTOCJson();
    }
    // you can use following api calls after this
    /**
    exControls.hasNextPage()
    exControls.nextPage();
    exControls.hasPrevPage()
    exControls.prevPage();
    exControls.makeBookMark();
    exControls.changeFontSize(int);
    exControls.changeColumnMaxWidth(int);
    exControls.setTheme("theme-id-goes-here");
    exControls.setScrollMode("scroll-type-id-goes-here");
    exControls.setDisplayFormat("display-format-id-goes-here");

    extcontrols.getRecommendedFontSizeRange()
    extcontrols.getRecommendedColumnWidthRange()
    var list = extcontrols.getAvailableThemes();
    var list = extcontrols.getAvailableScrollModes();
    var list = extcontrols.getAvailableDisplayFormats();
    var settings = extcontrols.getCurrentReaderSettings();
    **/
});

var config = TreineticEpubReader.config();
config.jsLibRoot = "src/ZIPJS/";

TreineticEpubReader.create("#epub-reader-frame");
TreineticEpubReader.open("assets/epub/epub_1.epub");