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

最新文章

1. Postgresql扩展及UUID
2. AE开发中栅格图层实现分级渲染
3. bootstrap-11
4. 阻止事件冒泡两种方式：event.stopPropagation();和return false;
5. [zz]Lessons from Pixar: Why Software Developers Should Be Storytellers
6. 在csdn里markdown感受
7. Objective-C：Foundation框架-概述
8. C++ 11中的右值引用以及std::move
9. Solr Schema.xml和solrconfig.xml分析(转)
10. Java网络编程(UDP协议：接收端)
11. ubuntu 64bit “arm-linux-gcc: No such file or directory”问题的解决方法
12. linux意外关机，如何修复
13. mysql应用技巧
14. C#使用Xamarin开发可移植移动应用(5.进阶篇显示弹出窗口与通讯中心)附源码
15. python的小基础
16. Use Zabbix Monitor Find ‘DBCC CheckDB’ Problem
17. [LeetCode] Pyramid Transition Matrix 金字塔转变矩阵
18. 记一次线上Zabbix对Redis监控实录
19. getOrderValue 排序 sql server
20. 关于web项目中静态资源加载不了的一些解决思路

热门文章

1. Nginx 404 Not Found 解决办法
2. virtualenv 在windows下的简单应用
3. 如何利用 Open Live Writer 在本地发布WordPress博客文章
4. 面试官：如果 http 响应头中 ETag 值改变了，是否意味着文件内容一定已经更改
5. CodeForces985G Team Players
6. Ganglia与Centreon整合构建智能化监控报警平台
7. 表删除时 Cannot delete or update a parent row: a foreign key constraint fails 异常处理
8. 关于toString的自动调用
9. 自建邮件服务器域名解析设置(A与MX记录)
10. ansible部署nginx