Epubjs reader

An easy ePUB e-book reader code that can display books and turn pages of books.

Process:

• Prepare ePUB ebooks

• Introduce the epubJS plug-in

 this.book = new Epub('Ebook File path')
Copy the code

• Mount the ebook to the DOM node

this.rendition = this.book.renderTo('bookRender', {width:window.innerWidth,
      height:window.innerHeight
    })
Copy the code

• Page flipping (calling the epubJS plug-in method)

this.rendition.prev()  / / back
this.rendition.next()  / / the next page
Copy the code

// Complete code
<template>
  <div class="ebook">
    <div class="read-wrapper">
      <div id="bookRender"></div>
      <div class="mask" >
        <div class="left" @click="prevPage"></div>
        <div class="center"></div>
        <div class="right" @click="nextPage"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Epub from 'epubjs'
const bookUrl = 'The Book of Mountains and Seas. Epub'
export default {
  name: ' '.data(){
   return{
     book:' '.rendition:' '}},methods: {showEpub(){
    this.book = new Epub(bookUrl)
    this.rendition = this.book.renderTo('bookRender', {width:window.innerWidth,
      height:window.innerHeight
    })
    this.rendition.display()
    },
    prevPage(){
    this.rendition.prev()  
    },
    nextPage(){
     this.rendition.next()
    }
  },
  mounted(){
    this.showEpub()
  }
};
</script>

<style scoped lang="scss" rel='stylesheet/scss'>
.ebook{
  position: relative;
  .read-wrapper{
   .mask{
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: 10;
    .left{
     flex: 0 0 20%;
    }
    .center{
      flex: 1;
    }
    .right{
      flex: 0 0 20%; }}}}</style>

Copy the code