最近在寫一個電子書的功能,從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: width,
height: height
})this.book.setStyle('width', `${width}px`)
this.book.setStyle('height', `${height}px`)