老师，section与index是不一致的

Question

我用的自己下载的电子书资源，貌似出现了section对应的只有一级目录的，无论

refreshLocation () {
      const currentLocation = this.currentBook.rendition.currentLocation()
      const startCfi = currentLocation.start.cfi
      const progress = this.currentBook.locations.percentageFromCfi(startCfi)
      console.log('refresh', currentLocation)
      this.setSection(currentLocation.start.index)
      this.setProgress(Math.floor(progress * 100))
      saveLocation(this.fileName, startCfi)
    },//这里获取到的section

还是点击下一章或者上一章，都是切换的一级章节，导致与目录无法一一对应，让点击目录高亮和章节显示都有bug
github地址：https://github.com/shlroland/EBOOK

Answer 1

提问者 慕码人1486145 2019-07-23 00:08:36

用calibre这个软件看了下电子书的元数据，发现了这几个问题。第一，貌似在获取navigation的时候，epubjs会把开头的目录或者封面这样的章节给自动处理掉，但是section读取是按顺序读取的，所以导致了错位。第二，section是读取epub已经分好段的html文件，子章节只是其中分好的html的一个段落用id选择器跳转的，section这个api貌似只是简单读取了html文件，只能判断主要章节的位置，对于子章节的读取无能为力。

Answer 2

Sam 2019-07-22 23:15:48

你好，调试了一下你的源码，造成问题的原因是EbookSettingProgress.vue组件中阅读时间采用aboslute布局，覆盖了上一章和下一章按钮，解决的办法是将progress-wrapper增加z-index属性，使其在阅读时间之上即可，css如下：

.progress-wrapper {  
    position: relative;  
    z-index: 100;
    // ...
}

另外，建议把EbookReader.vue组件中epub电子书解析部分加上分类支持，源码如下：

const baseUrl = `${process.env.VUE_APP_RES_URL}/epub`
const [categoryName, bookName] = this.fileName.split('|')
const url = `${baseUrl}/${categoryName}/${bookName}.epub`

• 提问者 慕码人1486145 #1

  老师，您好。我用calibre这个软件看了下电子书的元数据，发现了这几个问题。第一，貌似在获取navigation的时候，epubjs会把开头的目录或者封面这样的章节给自动处理掉，但是section读取是按顺序读取的，所以导致了错位。第二，section是读取epub已经分好段的html文件，子章节只是其中分好的html的一个段落用id选择器跳转的，section这个api貌似只是简单读取了html文件，只能判断主要章节的位置，对于子章节的读取无能为力。