npm安装
npm install epubjs
在Vue中使用的话，可能会遇到this.rendition.on(‘touchstart’, {})或者其他事件无效的问题，这时候，我们可以重新安装epubjs，但是需要特定的版本，我们可以用@来固定版本安装，命令如下：
npm install epubjs@0.3.71
生成Book对象
this.book = new Epub(BOOK_URL)
通过Book.renderTo生成Rendition对象
// read是DOM标签的id
this.rendition = this.book.renderTo('read', {
width: window.innerWidth,
height: window.innerHeight,
method: 'default' //兼容微信
})
通过Rendtion.display渲染电子书
this.rendition.display()
ePub电子书翻页
上一页
function prevPage() {
if (this.rendition) {
this.rendition.prev()
}
}
下一页
function nextPage() {
if (this.rendition) {
this.rendition.next()
}
}
ePub电子书的字号设置和场景切换
设置主题
function setTheme(index) {
this.themes.select(this.themeList[index].name)
this.defaultTheme = index
}
注册主题
function registerTheme() {
this.themeList.forEach(theme => {
this.themes.register(theme.name, theme.style)
})
}
设置字号大小
function setFontSize(fontSize) {
this.defaultFontSize = fontSize
if (this.themes) {
this.themes.fontSize(fontSize + 'px')
}
}
ePub电子书生成目录和定位信息
Book对象的钩子函数ready
this.book.ready.then(() => {
// 生成目录
this.navigation = this.book.navigation
// 生成Locations对象
return this.book.locations.generate()
}).then(result => {
// 保存locations对象
this.locations = this.book.locations
// 标记电子书为解析完毕状态
this.bookAvailable = true
})
ePub电子书通过百分比进行定位
function onProgressChange(progress) {
const percentage = progress / 100
const location = percentage > 0 ? this.locations.cfiFromPercentage(percentage) : 0
this.rendition.display(location)
}