epub.js的使用

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控件

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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。