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

01-16 13:44