epub阅读器

【实例简介】

利用epubjs对epub文件进行解析的阅读器，可以翻页，字体调整，主题设置等

【实例截图】

【核心代码】

<template>
  <div>
    <div style="display: flex;">
      <span @click="prePage()">上一页</span>
      <span @click="nextPage()">下一页</span>
      <span @click="changeSize(1)">字体大</span>
      <span @click="changeSize(0)">字体小</span>
      <span @click="setThemes(1)">模式</span>
      <span>目录</span>
      <span @click="turnPage()">进度条({{pageSelect}}/{{pageLength}})</span>
    </div>
    <div id="read"></div>
  </div>
</template>

<script>
  import Epub from 'epubjs'
  global.ePub=Epub

  // const DOWNLOAD_URL = '/static/biHua.epub'
  const DOWNLOAD_URL = 'http://172.21.200.11/resource/images/epub/10.epub'
  export default{
    name: 'ReadDemo',
    data () {
      return {
        defalutFontSize: 18,
        defalutTheme: 0,
        pageLength: 0,//总页数
        pageSelect: 1,//当前页
        themeList: [
          {
            name: 'defalut',
            style: {
              body: {
                'color': '#000', 'background': '#fff'
              }
            }
          },
          {
            name: 'black',
            style: {
              body: {
                'color': '#fff', 'background': '#000'
              }
            }
          }
        ]
      }
    },
    mounted() {
      this.showEpub()
    },
    methods: {
      showEpub(){//解析电子书
        //生成book
        this.book = new Epub(DOWNLOAD_URL)
        //生成redition，通过book.renderTo
        this.rendition = this.book.renderTo('read',{
          flow: "auto",//页面类型
          width:window.innerWidth,
          height:window.innerHeight,
          // allowScriptedContent : true
        })
        //利用display渲染电子书
        this.rendition.display()
        //获取themes对象
        this.themes = this.rendition.themes
        //设置默认字体
        this.setFontSize(this.defalutFontSize)
        //设置阅读主题
        this.registerThemes()
        //设置默认主题
        this.setThemes(this.defalutTheme)
        //获取location对象，通过epubjs的钩子函数进行调用
        this.book.ready.then(()=>{
          this.navigation = this.book.navigation//书本目录
          this.section = this.book.section()
          this.book.spine.each(item=>{
            // console.log(item)
          })
          return this.book.locations.generate()
        }).then( rs => {
          this.locations = this.book.locations//进度条
          console.log(this.book.pageList) 
          this.pageLength=this.locations.length()
        })
      },
      turnPage(){
        let random =Math.ceil(Math.random()*1000)
        this.pageSelect=random 1
        this.rendition.display(this.locations.cfiFromLocation(random))
      },
      nextPage(){//下一页
        this.rendition.next()
      },
      prePage(){//上一页
        this.rendition.prev()
      },
      setFontSize(fontSize){//设置书本字体大小
        if(this.themes){
          this.themes.fontSize(fontSize 'px')
        }
      },
      changeSize(type){
        if(type==1){
          this.defalutFontSize =1
        }else{
          this.defalutFontSize-=1
        }
        this.setFontSize(this.defalutFontSize)
      },
      registerThemes(){//设置阅读主题
        this.themeList.forEach((item)=>{
          this.themes.register(item.name,item.style)
        })
      },
      setThemes(index){//设置主题样式
        this.themes.select(this.themeList[index].name)
        this.defalutTheme=index
      }

    }
  }
</script>