epub.js的使用
npm安装
npm install epubjs
epub阅读器开发
ePub电子书解析和渲染
生成Book对象
this.book = new Epub(DOWNLOAD_URL)
通过Book.renderTo生成Rendition对象
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)
}
HTML5 range控件
<input class="progress"
type="range"
max="100"
min="0"
step="1"
@change="onProgressChange($event.target.value)"
@input="onProgressInput($event.target.value)"
:value="progress"
:disabled="!bookAvailable"
ref="progress">
链接:https://www.jianshu.com/p/b923a50dbdc3
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。