"Epub.js| Translation | original" open source middleware epub.js use and its Chinese documents

The group project "JavaScript-based reading platform" is under development and is expected to be launched at the end of the year.

As a result of the flask framework of web development experience, the first version of the product I am responsible for the Web platform construction, technology selection:

Server side: Nodejs-express

Front end: React, Ant Design

Database: Mysql

Before the front-end technology in the flask framework used a basic html+css, and a small part of the jquery effect, because always interested in the front-end, this bold use of school is not so solid (or more popular) react, practice guiding theory.

The book platform is a highly customizable, personalized library that enables online reading, instant sharing, and convenient annotation notes.

Back to the topic, epub is one of the most popular e-book specifications, there are many ways to parse and render epub files on the web, but in JavaScript, especially browser-side rendering middleware, only epub.js.

There is less introduction to Epub.js on the Web (although 2K is already on GitHub), more conceptual content, such as:

Epub.js is a JavaScript library that supports rendering epub files on the browser side across multiple devices, providing a common ebook functionality interface (such as rendering, persistence, and paging) without the need to develop a dedicated application or plug-in.

The specific usage varies from person to person, here I introduce the case that combines react use:

Is the use of react and antd to build a background management system, for the file upload download delete function has been done, epub.js to solve is the EPUB specification of how the file parsing and rendering.

Click on the "read this book" Action:

This is the basic single page reading page that epub.js combines with react, and the Epub.js middleware encapsulates the process of parsing epub files. The left and right side of the page key can be customized on demand, even with ANTD components to replace it is not a problem.

Simple usage is easily understood in official documents: Https://github.com/futurepress/epub.js

There are multiple parsing modes to choose from, and single page viewing is the default mode.

But for a professional reading platform, simply presenting the content of the book is far from enough, Epub.js provides more interfaces:

Https://github.com/futurepress/epub.js/blob/master/documentation/README.md

Method: EPub (Bookpath, Options)

Create an EPUB book instance:

Bookpath Optional parameters that specify the path to the Epub file, which can be either a network resource or a local resource.

var Book = EPub ("url/to/book/"// with default optionsvarTrue  }); Book.open ("url/to/book/"//

Options optional parameters, configuring parsing parameters

{bookpath:NULL, Version:1,//changing'll cause stored book information to be reloadedRestorefalse,//Skips parsing epub contents, loading from Localstorage insteadStoragefalse,//true (auto) or False (none) | override: ' RAM ', ' websqldatabase ', ' indexeddb ', ' filesystem 'Spreadstrue,//Displays ColumnsFixedlayout:false,//--would turn off paginationStyles: {},//Styles to is applied to epubWidth:false,//width and height You can set the width and height of the book content, and the default value is not set, which fills the parent window. Heightfalse, }

More ways to parse books:

Book.open (Bookpath) opens a book of the specified path, similar to the constructor function, just separating the configuration and parsing process

var true  }); Book.open ("url/to/book/"//

You can also bring an extension:

Book.open ("url/to/book.epub");

The Book.renderto (element) appends the parsed book to an HTML node and renders it, and the Epub book content is rendered in HTML. (using an IFRAME tag)

var Book = EPub ("url/to/book/"true  }); var $el = document.getElementById ("div-id"); Book.renderto ($el);

A parameter can also be a string representation:

var Book = EPub ("url/to/book/"); Book.renderto ("div-id");

Book.nextpage () Book.prevpage ()

In the Reading page, the paging control function is added to the button event function:

<div onclick="book.prevpage (); ">?</div><div onclick="book.nextpage (); ">?</div>

It must be rendered before the page is answered.

Book.displaychapter (CHAP, end) displays the specified chapters:

Loads the specified chapters onto the page, loading the first page of this chapter:

Book.displaychapter ('/6/4[chap01ref]!/4[body01]/10');

The second parameter is set to True, and the last page of this chapter is loaded:

Book.displaychapter (3, true);

Book.goto (URL) jumps to the specified section:

Load the specified section (requires Pagemap)

var skip = Book. Goto ("chapter_001.xhtml"); Skip.then (function () {    console.log ("  On Chapter 1");})

Usually used to display a table with a link to a specified chapter

Book.setstyle (Style, Val, prefixed) sets the style of the book content:

Book.setstyle ("font-size""1.2em");

Book.removestyle (style) removes the style of the setting. Book.destroy () removes the iframe and event functions. Promisesbook.getmetadata () Gets the meta data in the callback function:

book.getmetadata (). Then (function (meta) {    = meta.booktitle+""+  Meta.creator;});

Returns an object:

{  "BookTitle":"The title of the book",  "Creator":"Book Author",  "Description":"The description/synopsis of the book",  "pubdate":"",  "Publisher":"The Publisher",  "identifier":"The ISBN",  "language":"en -US",  "Rights":"Copyright Text",  "modified_date":"",  "Layout":"",  "Orientation":"",  "spread":"",  "direction":NULL}

Book.gettoc () Gets the TOC in the callback function, which is an array object that contains the directory structure.

Book.gettoc (). Then (function (TOC) {    console.log (TOC);});

Book.generatepagination () for paging, optional parameters for page size:

book.generatepagination (). Then (function (TOC) {    console.log ("pagination generated " );}); Book.generatepagination (PageWidth, PageHeight). Then (function (TOC) {    console.log ("  Pagination generated");});

Events that can be responded to:

Book:ready

Book:stored

Book:online

Book:offline

Book:linkclicked

Book.on ('book:linkclicked', function (href) {    console.log (href);});

Book:pagechanged

{  2   0.5 pagerange: [1 2    3]}

The Pagechanged event responds to the current page, provided there is a page number list

Book.on ('book:pagechanged', function (location) {    Console.log ( Location.anchorpage, Location.pagerange)});

Renderer:resized

Renderer:chapterdisplayed

renderer:chapterunloaded

Renderer:locationchanged

  "EPUBCFI (...) "

The LocationChanged event responds to the current location information and can be used to make progress bars and other effects.

Book. On (' renderer:locationchangedfunction (console.  Log (LOCATIONCFI)});    

Renderer:visiblerangechanged

"Epub.js| Translation | original" open source middleware epub.js use and its Chinese documents