epubjs阅读器引擎

pub.js是一个用于在浏览器中展示epub文档的JavaScript库，解决了epub电子书的解析、渲染、定位等技术难题，提供了媲美原生APP的阅读体验。

git地址：https://github.com/futurepress/epub.js

npm安装

1. npm install epubjs

复制代码

注意：如果大家用epub.js来打开epub文件的话，一定要先将jszip.js引入，不然epub.js无法正常解析文件

1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>

复制代码

epub.js核心类

• Book 阅读器解析
• Rendition 阅读器渲染
• Locations 阅读器定位
• Navigation 存储目录信息
• View Manager 阅读器渲染出来的视图管理
• EpubCFI 利用EpubCFI标准进行文字级别定位（可以定位到电子书中任意一个字符）
• Theme 管理场景切换
• Spine 指定阅读顺序和管理Section
• Section 指向具体章节（全文检索、章节切换）
• Contents 管理章节资源内容（为某章节添加自定义字体）
• Hook 定义钩子函数、管理类的生命周期
• Annotations 管理标签（文字高亮显示）
  

初始化

1. // doc 将epub渲染到doc上
   
2. var doc = document.querySelector('.epub'),
   
3.     // epub(url) 获得book对象，最好是全局book
   
4.     book = epub(url),
   
5.     // rendition 最好全局对象
   
6.     rendition = book.renderTo(doc, {
   
7.         // 默认双页显示
   
8.         width: '100%',
   
9.         height: '100%',
   
10.         // 单页滚动显示epub，推荐加上下面两个属性
    
11.         manager: "continuous",
    
12.         flow: "scrolled"
    
13.     })
    
14. 
    
15. // 显示到页面上
    
16. rendition.display()

复制代码

生成目录

1. // 目录跳转可以通过rendition.display(chapter.href)
   
2. 
   
3. book.loaded.navigation.then(function(toc) {
   
4. 
   
5.     // 方式一 toc是一个多维数组，下面这种只能显示第一级的目录
   
6. 
   
7.     var catalogItme = '';
   
8.     toc.forEach(function(chapter) {
   
9.         catalogItme += '<p class="catalog-itme" data-catalog="'+ chapter.href +'">'+ chapter.label +'</p>'
   
10.     });
    
11. 
    
12.     // 将拼接好的目录渲染到页面里      
    
13.     document.querySelector('catalog').innerHTML = catalogItme
    
14. 
    
15.     // 方式二 将所有的目录全部显示出来
    
16.         // 第一级的catalog-itme-0
    
17.         // 第二级的catalog-itme-1 以此类推...
    
18.     document.querySelector('catalog').innerHTML = recursionHandle(toc.toc, [], 0).join('')
    
19. })
    
20. 
    
21. var recursionHandle = function (toc, doc, i) {
    
22.     toc.forEach(function(chapter) {
    
23.         doc.push('<p class="catalog-itme catalog-itme-'+ i +'" data-catalog="'+ chapter.href +'">'+ chapter.label +'</p>')
    
24.         if(chapter.subitems && chapter.subitems.length) {
    
25.             i++
    
26.             recursionHandle(chapter.subitems, doc, i)
    
27.             i > 0 && i--
    
28.         }
    
29.     })
    
30. 
    
31.     return doc
    
32. }
    
33. 
    
34. // 点击跳转
    
35. $('.catalog-itme').on('click', function () {
    
36.     // 当点击报错的时候，请看下面  杂项-目录跳转报错
    
37.     var $this = $(this),
    
38.         url = $this.data(catalog)
    
39. 
    
40.     rendition.display(url)
    
41. })

复制代码