vue-cli -- epub电子书

一、安装Epubjs

npm install epubjs -S

二、引用epubjs

API文档

// 全局没写，写的局部，在要使用epubjs的页面引入
import Epub from 'epubjs'

三、配置epub电子书路径

注意vue-cli 3.0，如果是放在public里面的静态资源，引用的时候并不需要配置/public前缀，直接写在public里面的地址

const DOWNLOAD_URL = '/static/dianzishu.epub'

// 正常来说应该是：'/public/static/dianzishu.epub'，这样写反而没有效果

四、创建epub实例对象

通过实例化epub，构建一个Book对象，这个实例有个参数为电子书的路径，用于对电子书解析

methods: {
    showEpub () {
        this.book = new Epub(DOWNLOAD_URL)
    }
}

五、renderTo()方法

通过Book对象上的renderTo()方法可以生成一个rendition对象，该对象上的diaplay()方法可以对电子书渲染

read不是什么监听事件，而是指定的要讲电子书渲染进去的DOM的ID

第二个参数对象是对电子书渲染的配置，如宽高等

methods: {
    showEpub () {
        this.book = new Epub(DOWNLOAD_URL)
        this.rendition = this.book.renderTo('read', {
            width: window.innerWidth,
            height: window.innerHeight,
            method: 'default',
            flow: 'auto'
        })
        this.rendition.display()
    }
}

method有两种，一种是default，一种是continuous

flow有几种配置，一种是auto，一种是paginated，一种是scrolled-doc

Book对象上有三个属性，rendition，locations，navigation

this.rendition = this.book.renderTo()
this.locations = this.book.locations