Epub.js 是一个JavaScript库，用于在浏览器中跨多种设备渲染EPUB文档。

Epub.js 提供了一个接口，用于实现常见的电子书功能（如渲染、持久化和分页），而无需开发专用应用程序或插件。特别地，它使用了非常宽松的Free BSD许可证。

尝试阅读《白鲸记》

为什么选择EPUB

EPUB标准是一种广泛使用且易于转换的格式。许多书籍都采用此格式，并可转换为PDF、Mobi和iBooks等其他格式。

解压缩后的EPUB3包含HTML5文件、CSS、图像和其他媒体，就像任何其他网站一样。然而，它强制执行一种图书组件架构，使我们能够根据受控词汇表来渲染书籍及其部分。

更具体地说，EPUB架构标准化了目录，提供了允许缓存整个书籍的清单，并将内容存储与显示方式分离。

快速入门

如果使用归档的.epub文件，请先包含JSZip（在引入epub.js之前）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>

从构建文件夹获取压缩代码：

<script src="../dist/epub.min.js"></script>

设置一个渲染区域：

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

创建新的Epub对象并将其渲染到该元素：

<script>
  var book = ePub("url/to/book/package.opf");
  var rendition = book.renderTo("area", {width: 600, height: 400});
  var displayed = rendition.display();
</script>

渲染方法

默认

book.renderTo("area", { method: "default", width: "100%", height: "100%" });

查看示例

默认管理器一次只显示一个节。

持续

book.renderTo("area", { method: "continuous", width: "100%", height: "100%" });

查看示例

连续管理器会显示足够填充屏幕的多个章节，并预先加载下一个章节。这使得在移动和桌面设备上平滑滚动页面成为可能，但性能不如默认方法。

流控制覆盖

自动（默认）

book.renderTo("area", { flow: "auto", width: "900", height: "600" });

查看示例

流控制基于OPF中的设置，默认为“分页”。

分页

book.renderTo("area", { flow: "paginated", width: "900", height: "600" });

查看示例

滚动：book.renderTo("area", { flow: "scrolled-doc" });

查看示例

脚本内容

脚本内容，即EPUB HTML内容中的JavaScript，因可能执行恶意代码而默认禁用。

这是通过将内容渲染到的iframe沙箱化来实现的，不过仍然建议在服务器端对EPUB内容进行清理。

如果一个可信赖的EPUB包含交互性，可以将allowScriptedContent: true传递给Rendition设置以启用它。

<script>
  var rendition = book.renderTo("area", {
    width: 600,
    height: 400,
    allowScriptedContent: true
  });
</script>

这将允许沙盒内的内容运行脚本，但目前会使沙盒不安全。

文档

API文档可在epubjs.org/documentation/0.3/查阅。

Markdown版本包含在仓库的documentation/API.md中。

本地运行

安装node.js。

然后使用npm安装项目依赖项：

npm install

可以通过以下命令本地运行阅读器：

npm start

示例

• 双联页
• 滚动
• 滑动
• 输入
• 高亮

查看所有示例

测试

测试可以通过NPM上的Karma运行：

npm test

发布构建

构建是通过webpack和babel合并和压缩的。

生成新构建，请运行：

npm run prepare

或者要持续构建，请运行：

npm run watch

钩子

类似于插件，Epub.js实现了可“挂钩”的事件，因此你可以与书籍内容互动并对其进行操作。

这种功能的例子包括在显示章节内容前从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){
      // 对视频项执行操作
    });
})

渲染过程中的可挂钩部分如下所示。

book.spine.hooks.serialize // 节点正在被转换为文本
book.spine.hooks.content // 节点已被加载和解析
rendition.hooks.render // 节点已渲染到屏幕上
rendition.hooks.content // 节点内容已加载
rendition.hooks.unloaded // 节点内容正在卸载

阅读器

阅读器已移至其独立的仓库：https://github.com/futurepress/epubjs-reader/

转自https://gitcode.com/gh_mirrors/ep/epub.js