如何基于epub.js实现跳转至EPUB文件目录页的按钮？

一、先搞懂CFI #

CFI是Canonical Fragment Identifier的缩写，是EPUB标准定义的内容定位标识符——简单说就是电子书里每个内容节点的唯一“地址”，epub.js靠它实现精准页面跳转。

二、如何获取目录页的CFI #

epub.js完全支持从书籍导航数据中提取目录项的CFI，步骤很直接：

• 书籍加载完成后，通过book.navigation拿到完整的导航目录（TOC）数据
• 导航数组里的每个条目都带有href属性，这个值就是对应目录项的CFI（或直接可用于跳转的定位符）
• 若要跳转到电子书的主目录入口，直接取导航数组的第一个元素的href即可

三、完整代码实现 #

假设你已经初始化好了book和rendition实例，按以下步骤添加功能：

1. 新增跳转按钮（HTML） #

<button id="jumpToToc">回到目录</button>

2. 实现跳转逻辑（JavaScript） #

// 等待书籍加载完成后绑定事件
book.loaded.then(() => {
  const tocBtn = document.getElementById('jumpToToc');
  tocBtn.addEventListener('click', () => {
    const tocData = book.navigation.toc;
    // 确认存在目录数据
    if (tocData && tocData.length > 0) {
      // 取第一个目录项的CFI（主目录入口）
      const targetCfi = tocData[0].href;
      // 执行跳转，用rendition.display或book.goto都可以
      rendition.display(targetCfi);
      // 也可以用book.goto(targetCfi);
    }
  });
});

四、特殊情况处理 #

• 部分EPUB的导航结构可能嵌套较深，如果需要的是最顶层目录入口，优先取toc数组中层级最浅的第一个条目
• 若遇到href是相对路径而非CFI的情况，可通过book.locations.cfiFromUrl(href)将其转换为标准CFI格式

内容的提问来源于stack exchange，提问作者Andrew Foulds