Criando um leitor de Epub com Javascript

Neste artigo iremos ver uma bilblioteca que permite você criar o seu próprio leitor de epub e mob com Javascript. Para isso você precisa ter conhecimento intermediário em Javascript, HTML E CSS.

Epub.js

Epub.js é uma biblioteca JavaScript para renderizar documentos ePub no navegador, em muitos dispositivos.

Ele fornece uma interface para funções comuns de e-books (como renderização, persistência e paginação) sem a necessidade de desenvolver um aplicativo ou plugin dedicado. É importante ressaltar que ele tem uma licença Free BSD incrivelmente permissiva .

O padrão EPUB é um formato amplamente usado e facilmente conversível. Muitos livros estão atualmente neste formato e é conversível em muitos outros formatos (como PDF, Mobi e iBooks).

Um EPUB3 descompactado é uma coleção de arquivos HTML5, CSS, imagens e outras mídias – como qualquer outro site. No entanto, ele impõe um esquema de componentes do livro, o que nos permite renderizar um livro e suas partes com base em um vocabulário controlado.

Mais especificamente, o esquema EPUB padroniza o índice analítico, fornece um manifesto que permite o armazenamento em cache de todo o livro e separa o armazenamento do conteúdo de como ele é exibido.

Instalação

Para realizar a instalação do Epub.js na sua aplicação basta executar o comando:

yarn add epubjs

npm install epubjs

E para realizar a importação da biblioteca para sua página:

import ePub from 'epubjs'

E para criar seu primeiro epub, basta ter o seguinte código javascript:

var book = ePub("url/to/book/package.opf"); // aqui vc importa seu epub localmente
var rendition = book.renderTo("area", {width: 600, height: 400});
var displayed = rendition.display();

Em nosso html iremos precisar de uma div com id “area” para realizar a renderização:

<div id="area"></div>

E assim você terá seu primeiro leitor de epub simplificado.

Integrações com frameworks

É possível utilizar o Epubjs com os frameworks front-end mais famosos do mercado. Resolvi fazer um exemplo utilizando Vue.js e Quasar e o resultado ficou bem satisfatório: