exe-epub-reader 职悦阅读器组件

简介

基于 Vue 与 epub.js 的二次封装 用户只需导入电子书的路径即可阅读电子书

安装

npm install exe-epub-reader

引入

// main.js中

import  store, { exeEpubRender }  from 'exe-epub-reader'
Vue.use(exeEpubRender)

new Vue({
  ...store,
  render: h => h(App)
}).$mount('#app')

使用

属性

| 属性 | 类型 | 是否必填 | 描述 | 示例 | | :----: |:---- |:---- |:---- |:---- | | resourceUrl | string | true | epup电子书路径地址 | http:b.com 或 ./public/book/content.opf| | lang | string | false | 国际化 | zn 或 en | chapter | string | false | 需要指定显示哪一章节 | epubcfi(/6/46[chapter-06_0012.xhtml] |

注意! 相对路径本地预览时，需要先把epub格式的文件解压出来再引入

方法

| 名称 | 描述 | 返回值 | | :----: |:---- |:---- | | getReadInfo | 获取用户阅读信息 | object|

返回值

| 属性 | 类型 | 描述 | | :----: |:---- |:---- | | chapter | 获取用户-当前哪个章节 | string| | progress | 获取用户-总进度 34% | number| | readTime | 获取用户-总阅读时间 单位s | number| | section | 获取用户-第几章 | number|

示例

<template>
  <div>
    <exe-epub-render
    ref="book" 
    :resource-url="resourceUrl" 
    :chapter="chapter" 
    lang='cn' ></exe-epub-render>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        file: './book3/OEBPS/content.opf',
        chapter: 'epubcfi(/6/46[chapter-06_0012.xhtml]!/4/2/1:0)'
      }
    },
    mounted() {
    // 获取用户阅读的信息
     this.$refs.book.getReadInfo().then(result => {
       console.log(result) 
       /*
       result
       {
            chapter: "epubcfi(/6/46[P22]!/4/2/2/1:0)"  // 当前哪个章节
            progress: 34                               // 总进度 34% 
            readTime: 8610                             // 总阅读时间 单位s
            section: 22                                // 第几章
       }
       */
     })
    }
  }
</script>

<style scoped>
</style>

###PC端 效果

###移动端 效果