Epubjs核心

安装epubjs

  npm install epubjs

电子书的解析和渲染

将电子书存放至public文件夹

  import Epubjs from 'epubjs';const DOWNLOAD_URL='121312.epub'//指向电子书的下载路径

生成Epubjs电子书
```
  this.book=new Epub(DOWNLOAD_URL)
```

通过this.book.renderTo()生成rendition对象

  this.rendition=this.book.renderTo('read',{width:window.innerWidth,height:window.innerHeight})

渲染电子书 this.rendition.display(）

电子书翻页

1.上一页

prevPage(){

if(this.rendition){

this.rendition.prev()

}

}

2.下一页

  nextPage(){if (this.rendition){this.rendition.next()}}

电子书主题背景切换和字体设置

电子书主题背景切换

通过this.rendition.themes获得this.theme对象

通过this.theme.select()选择主题

  setTheme(index){this.themes.select(this.themeList[index].name);this.defaultTheme=index;}//主题themeList:[{name:'eye',style:{body:{'color':'#000','background':'#fff'}}}，{}...]

字体大小设置

setFontSize(fontSize){

  this.defaultFontSize=fontSize;if (this.themes){this.themes.fontSize(fontSize+'px')}}

电子书目录和百分比定位

1.通过Epubjs的ready钩子函数获取

//默认情况下不会生成 this.book.locations对象，因为默认生成比较消耗性能

this.book.ready.then()表示电子书解析完成之后回调

         this.book.ready.then(()=>{this.navigation=this.book.navigation;window.console.log(this.navigation)//生成locations对象的定位符return this.book.locations.generate()}).then(()=>{//保存loactions对象this.locations=this.book.locations;//电子书渲染完this.bookAvailable = true})

2.电子书目录生成

  <div class="content-title">catalogue</div><div class="content-item" v-for="(item,index) in navigation.toc" :key="index"@click="jumpTo(item.href)"><span class="text">{{item.label}}</span></div>//跳转函数jumpTo(href){this.rendition.display(href)this.hideTitleAndMenu();}

3.百分比定位电子书

  onProgressChange(progress){const percentage=progress/100;//通过this.locations.cfiFromPercentage(percentage)获取到当前的页数const location=percentage>0?this.locations.cfiFromPercentage(percentage):0;//传入location进行定位渲染this.rendition.display(location)}

4.进度条

<div class="progress-wrapper" >
<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">
</div>

epub阅读器开发简介相关推荐

EPUB和PDF的区别，有什么好用的epub阅读器
目前我们在阅读中经常遇到EPUB和PDF的文件,它们都能作为电子书文件,那它们之间有什么区别呢?今天笔者就来给大家科普一下它们俩的区别,顺便再给大家安利一些适合阅读EPUB和PDF的软件. EPUB: ...
宅家神器—epub阅读器
宅家神器-epub阅读器眨眼间寒假已经过了一半,想必大家宅在家也是有些许无聊.所以不要再让你的书单压箱底了.趁着这个超长假期还没过完,翻一翻曾经只翻过几页的书,看一看之前还没来得及看的小说. 不用担 ...
学习软件之epub阅读器推荐
学习软件之epub阅读器推荐现在这个信息时代,只要你想,就可以在网上轻而易举的找到自己想要的学习资料.一般来说,学习资料以视频和电子书为主.相比这两种资料,视频学习资料能够讲解的更详细但是进度比较慢 ...
epub与txt的区别是什么？有什么好用的epub阅读器
目前我们在阅读中经常遇到EPUB和TXT的文件,它们都是一种电子书文件,那它们之间有什么区别呢?今天笔者就来给大家科普一下它们俩的区别,顺便再给大家安利一些适合阅读EPUB和TXT的软件. EPUB: ...
EPUB阅读器聚合-Android
EPUB阅读器聚合-Android 书是人类智慧的结晶.从古到今,一提到书,我们很自然地会想起白纸黑字.中国古代的四大发明有一半是和书有关,即造纸和印刷术.进入21世纪,随着科技日新月异的发展,一个崭 ...
EPUB、CAJ 、PDF 格式的区别，有什么好用的IOS手机epub阅读器
无论是寻找资料,还是寻找图书资源,又或是查找期刊论文,总是免不了和各种各样的网络文件打交道.那么不同格式的软件之间区别的在何处呢?今天我就为大家介绍一下EPUB.MOBI.CAJ 三种格式之间的区别, ...
Web阅读器开发系列教程（入门篇）
作者:Sam 前言最近我在慕课网发布了两门关于Web阅读应用开发的课程,采用Vue全家桶开发.免费课是入门级课程,初步实现了一个阅读器.实战课是进阶课程,实现了一个高性能的互联网阅读应用.两个项目都 ...
iOS平台epub阅读器推荐
iOS平台epub阅读器推荐大家好,眼看着假期就要过去了,不知道大家准备好上班/上学了没有?这段时间有没有好好读书呢.上次小编推荐了几款Android平台上可以使用的epub阅读器.今天就来给大家推 ...
iOS上最好用的3款epub阅读器（转载）
iOS上最好用的3款epub阅读器在网络发展迅猛的当下,你是喜欢用手机看电子书还是喜欢捧一本纸质书呢?或是用专门的电子书阅读器阅读呢? 论方便来说我还是更偏向于用手机看电子书,毕竟现在大家都是出门必 ...

epub阅读器开发简介