README
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端 效果
移动端 效果