epub阅读器开发简介

Epubjs核心

安装epubjs

  npm install epubjs

电子书的解析和渲染

1. 将电子书存放至public文件夹

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

2. 生成Epubjs电子书

     this.book=new Epub(DOWNLOAD_URL)

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

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

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

电子书翻页

1.上一页

prevPage(){        

  if(this.rendition){              

this.rendition.prev()        

  }        

}

2.下一页

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

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

1. 电子书主题背景切换

   通过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'}}}，
     {}...
     ]

2. 字体大小设置

   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>