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: width,
height: height
})this.book.setStyle('width', `${width}px`)
this.book.setStyle('height', `${height}px`)
