javascript - epubjs如何定位到上次翻到的页面？

Question

const pre = async () => {
  await getRendition().prev()
  console.log(getRendition().currentLocation());

  saveEbookWatchRecord({
    id: bookId,
    watchRecord: (getRendition().currentLocation() as any).start.cfi
  })
}
 
const next = async () => {
  await getRendition().next()
  console.log(getRendition().currentLocation());
  
  saveEbookWatchRecord({
    id: bookId,
    watchRecord: (getRendition().currentLocation() as any).start.cfi
  })
}

getRendition().currentLocation()会获取到一个start和end，我取的是start

const initEpub = () => {
  nextTick(() => {
    createBook(url.value)
    render('epub', { width: '100%', height: '100%' })
    display(watchRecord ? watchRecord : undefined)
  })
}

每次定位都不准？

Answer 1

在 Epub.js 中，为了准确地定位到上次翻到的页面，你需要确保在调用 display 方法时传递了正确的位置信息。根据你提供的代码片段，你已经尝试在翻页时保存当前位置的 CFI（Content Fragment Identifier），并在初始化时尝试使用 display 方法恢复这个位置。

但是，有几个关键点需要注意，以确保正确定位：

1. 保存和加载位置信息：你需要确保保存的位置信息（在本例中是 CFI）在保存时是正确的，并且在加载时是可用的。
2. 使用 display 方法：display 方法通常用于跳转到特定的位置。你需要确保传递给它的是正确的 CFI 字符串。
3. 异步操作：Epub.js 的某些操作是异步的，所以你可能需要等待它们完成后再进行下一步操作。

基于你的代码，以下是一些建议：

1. 确保 getRendition() 返回的是正确的 Rendition 实例：确保 getRendition() 函数始终返回相同的 Rendition 实例，以便你可以跨函数调用保持状态。
2. 检查 watchRecord 的值：在调用 display 方法之前，确保 watchRecord 包含了一个有效的 CFI 字符串。如果它是 undefined 或一个空字符串，display 方法可能不会按预期工作。
3. 在调用 display 后等待：虽然 display 方法本身可能不是异步的，但渲染和定位到特定页面可能需要一些时间。你可能需要在调用 display 后添加一些延迟或使用其他机制来确保页面已完全加载并定位到正确的位置。

这里是一个简化的例子，展示如何在翻页时保存位置并在初始化时加载位置：

const initEpub = async () => {
  const book = await createBook(url.value);
  const rendition = book.rendition;

  // 渲染电子书
  render('epub', { width: '100%', height: '100%' });

  // 如果有保存的记录，则显示到指定位置
  if (watchRecord) {
    await rendition.display(watchRecord); // 确保这里传入的是 CFI 字符串
  }

  // ... 其他初始化代码 ...
};

const saveLocation = () => {
  const location = rendition.currentLocation();
  const cfi = location.start.cfi;
  saveEbookWatchRecord({
    id: bookId,
    watchRecord: cfi
  });
};

const prev = async () => {
  await rendition.prev();
  saveLocation();
};

const next = async () => {
  await rendition.next();
  saveLocation();
};

请注意，在这个例子中，我假设 createBook、render、rendition.display 和其他相关函数都是按预期工作的。你需要根据你在项目中使用的 Epub.js 的具体版本和 API 进行调整。