1. 产品
  2.   电子书
  3.   JavaScript
  4.   Epub.js
 
  

用于 EPUB 文档呈现的免费 JavaScript 库

开源 JavaScript 库，用于在浏览器和其他设备上访问和呈现 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。请使用以下命令顺利安装。

通过 npm 安装 Epub.js

 npm install

您也可以手动安装它；直接从 GitHub 存储库下载最新版本文件。

通过 JavaScript 以多种方式呈现 EPUB 文档

开源 Epub.js 库使软件程序员能够在他们自己的 JavaScript 应用程序中以各种方式呈现 EPUB 文档。该库提供两种不同的渲染方法，包括默认和连续。默认呈现方法可用于一次显示单个部分。另一方面，连续模式可用于根据填满屏幕的需要显示多个部分，并在屏幕外预加载下一个部分。

通过 Java 库以多种方式呈现 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" });

在 JavaScript 应用程序中的 EPUB 文档中应用挂钩

Epub.js 库包含一个非常有用的功能，类似于用于与书本内容进行交互和操作的插件。该库实现了您可以轻松参与的事件。例如，用户可以在实施注释或显示章节内容之前直接从 YouTube 链接加载视频。 Hooks 需要一个事件来注册，并且可以返回一个阻塞的承诺，直到它们完成。

如何通过 Java API 从 YouTube 链接加载视频

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

通过 JavaScript 操作 EPUB 文档

开源的 Epub.js 提供了创建新的 EPUB 文档和仅使用几行 JavaScript 代码对其进行操作的完整功能。扩展名为 .epub 的文件只是一个 zip 文件，其中包含一堆 HTML、图像和有关电子书的元数据。该库允许指定自定义 CSS 和字体来设置文档样式。它提供了搜索整本书或搜索当前章节、滑动翻页、生成和保存位置等几个重要功能。

使用 Java API 在 EPUB 文档中滑动翻页

 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;
    });
});
 中国人