学问文库

 找回密码
 免费注册

快捷登录

QQ登录

只需一步,快速开始

epubjs阅读器引擎

[复制链接]
发表于 2022-10-30 09:09:38 | 显示全部楼层 |阅读模式
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. rendition.display()
复制代码


生成目录
  1. // 目录跳转可以通过rendition.display(chapter.href)

  2. book.loaded.navigation.then(function(toc) {

  3.     // 方式一 toc是一个多维数组,下面这种只能显示第一级的目录

  4.     var catalogItme = '';
  5.     toc.forEach(function(chapter) {
  6.         catalogItme += '<p class="catalog-itme" data-catalog="'+ chapter.href +'">'+ chapter.label +'</p>'
  7.     });

  8.     // 将拼接好的目录渲染到页面里      
  9.     document.querySelector('catalog').innerHTML = catalogItme

  10.     // 方式二 将所有的目录全部显示出来
  11.         // 第一级的catalog-itme-0
  12.         // 第二级的catalog-itme-1 以此类推...
  13.     document.querySelector('catalog').innerHTML = recursionHandle(toc.toc, [], 0).join('')
  14. })

  15. var recursionHandle = function (toc, doc, i) {
  16.     toc.forEach(function(chapter) {
  17.         doc.push('<p class="catalog-itme catalog-itme-'+ i +'" data-catalog="'+ chapter.href +'">'+ chapter.label +'</p>')
  18.         if(chapter.subitems && chapter.subitems.length) {
  19.             i++
  20.             recursionHandle(chapter.subitems, doc, i)
  21.             i > 0 && i--
  22.         }
  23.     })

  24.     return doc
  25. }

  26. // 点击跳转
  27. $('.catalog-itme').on('click', function () {
  28.     // 当点击报错的时候,请看下面  杂项-目录跳转报错
  29.     var $this = $(this),
  30.         url = $this.data(catalog)

  31.     rendition.display(url)
  32. })
复制代码







您需要登录后才可以回帖 登录 | 免费注册

本版积分规则

QQ|手机版|小黑屋|网站声明|学问文库 ( 冀ICP备2021002572号 )|网站地图

GMT+8, 2023-1-31 21:57 , Processed in 0.020457 second(s), 11 queries , Gzip On, Redis On.

Powered by Discuz! X3.5

Copyright © 2001-2023 Tencent Cloud.

文档搜索 客服微信 分享有奖 快速回复 返回顶部 返回列表