三（3-2）电子书解析和渲染

电子书的渲染就是将epub电子书解析成Book对象
在通过book对象生成Randition对象的过程

1.ebook.vue. 在src/文件目录下新建一个组件Ebook.vue
- 可以通过vue+tab或者vue+回车vue快速生成模板代码

2.到router文件下配置一下路由，让我们能通过url访问到这个组件。
修改src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Ebook from '@/Ebook'  //  导入Ebook组件
Vue.use(Router)

export default new Router({
  routes: [
    { //  将根路径调整
      path: '/'
      redirect: '/ebook' //  将他重定向到ebook路径下
      //  path: '/',
      //  name: 'HelloWorld',
      //  component: HelloWorld
    },//  router下再建一个对象
    {
      path: '/ebook',  //ebook路径
      component: Ebook  //   为刚刚导入的Ebook组件
    },
  ]
})

实现电子书的解析和渲染

1.在Ebook.vue通过import 将阅读器引擎导入vue组件当中

运行一下


这里的id没有创建，DOM没有创建

创建DOM

<template>
  <div class="ebook">
    <div class="read-wrapper">
        <div id="read"></div>
    </div>
  </div>
</template>

完整代码：
Ebook.vue

<template>
  <div class="ebook">
    <div class="read-wrapper">
        <div id="read"></div>
        <div class="mask">
          <div class="left"></div>
          <div class="center"></div>
          <div class="right"></div>
        </div>
    </div>
  </div><!--  -->
</template>

<script>
import Epub from 'epubjs'
//1.将阅读器引擎导入
const DOWNLOAD_URL = '/static/2018_Book_AgileProcessesInSoftwareEngine.epub'
//2.定义一个变量，指向电子书的下载路径
global.ePub = Epub
export default {
        methods: {
        //  电子书的解析和渲染
        showEpub() {  //3.定义一个方法，用来做电子书的渲染
            //3.1 生成Book,通过book变量来存储book对象， new一个额、Epub来生成book对象，传入一个参数-DOWNLOAD_URL
            this.book = new Epub(DOWNLOAD_URL)
            //console。log(this.book); 打印book对象查看效果
            //  3.2生成Rendition对象,通过Book.renderTo方法来生成Rendition对象
            //需要传入两个参数，一个是id，DOM的id。生产成的电子书会以DOM的形式挂载到这个id下面
            //第二个是option，只需定义渲染的屏幕宽高，充满全屏
            // this.rendtition = this.book.renderTo--通过rendtition方法将rendtition对象存入一个变量当中
            this.rendtition = this.book.renderTo('read', {
                width: window.innerWidth,
                height: window.innerHeight
            })
            //  3.3通过Rendtition.display（）方法 渲染电子书
            this.rendtition.display()
        }
    },
    mounted () {
        this.showEpub()
    }
}
</script>

<style lang='scss' scoped>
  @import 'assets/styles/global';
  .ebook {
    .mask {
       position: absolute;
        top: 0;
        left: 0;
        z-index: 100%;
        width: 100%;
        height: 100%;
    }
  }
 
</style>
 

/router/index,js

import Vue from 'vue'
import Router from 'vue-router'

import Ebook from '@/Ebook'
//  导入Ebook组件
Vue.use(Router)

export default new Router({
  routes: [
    {
      //  将根路径调整
      path: '/',
      redirect: '/ebook'
      //  将他重定向到ebook路径下
      //  path: '/',
      //  name: 'HelloWorld',
      //  component: HelloWorld
    },
    //  router下再建一个对象
    {
      path: '/ebook',
      //  ebook路径
      component: Ebook
      //   为刚刚导入的Ebook组件
    },
  ]
})