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端 效果

移动端 效果