vue + epub.js 电子书

最近在写一个电子书的功能,从2016年写到了2017年,如今总算告一段落,下面总结一下途中遇到的问题吧.

1. 前期准备

a) Epub.js

GitHub: https://github.com/futurepress/epub.js

b) Epub格式电子书

在线电子书格式转换: http://www.online-convert.com/

 

2. 正式开始

方式一: 使用epub文件

a) 引入epub.js和jszip.js(html)

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

        <script src="./lib/jszip.min.js"></script>

b) 配置电子书(js) 

this.book = window.ePub(`/ebooks/advanture.epub`, {   restore: true
})
this.book.renderTo(this.$els.ebook)

c) 添加翻页动作

/**  * 跳转到上一页
*/
goToPrePage () {
   this.book.prevPage()
},
/**
* 跳转到下一页
*/
goToNextPage () {
     this.book.nextPage()
},

方式二: 使用解压的epub文件夹

a) 引入epub.js(html)

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

b) 配置电子书(js)

this.book = window.ePub(`/ebooks/advanture/`, {   restore: true})
this.book.renderTo(this.$els.ebook)

 

3. 遇到的问题

a) 跳转到指定章节

/** 
* 返回chapterId对应的文件名 
*/
getHref (chapterId) {
   let idString = chapterId + ''
   let re = new RegExp(`\d{${idString.length}}\.`)
   let href = this.book.currentChapter.href || 'index_split_000.html'
   return href.replace(re, idString + '.')
},
goToChapter (chapter) {
    this.book.goto(this.getHref(chapter.chapterId))
}

b) 限制可读的章节

data ()
   return {    
       chapterPageNum: 0
    }
},
/** 
* 添加 章节渲染 监听 
*/
addChapterDisplayedListener () {
   this.book.on('renderer:chapterDisplayed', this.onChapterDisplayed.bind(this))
},
/** 
* 章节渲染 回调 
*/
onChapterDisplayed (chapter) {
   this.spinePos = chapter.spinePos
   if (parseInt(this.bookId) === 1 && chapter.spinePos === this.book1AvailableChapterNum - 1) {
        this.chapterPageNum = 1  
    }
},
/** 
* 跳转到上一页 
*/
goToPrePage () {  
    if (this.spinePos === this.bookAvailableChapterNum - 1) {
        this.chapterPageNum -= 1  
    }  
    this.book.prevPage()
},
/** 
* 跳转到下一页 
*/
goToNextPage () {  
    if (this.spinePos === this.bookAvailableChapterNum - 1) {
         if (this.chapterPageNum >= this.book.currentChapter.pages) {
                this.showToast('精彩内容,敬请期待~')    
        } else {      
            this.chapterPageNum += 1      
            this.book.nextPage()    
        }  
    } else {
         this.book.nextPage()  
     }
},

c) 手机上电子书宽度超出屏幕

const width = 300
const height = 500
this.book = window.ePub(`/ebooks/advanture/`, {
  restore: true,
  width,
  height: height
})

this.book.setStyle('width', `${width}px`)
this.book.setStyle('height', `${height}px`)

d)ios翻页时整个html滑动