vue+epubjs实现电子书阅读器的基本功能
下面是项目需要,然后我在网上学习的如何使用epubjs制作简单阅读器的大体过程，简单的记录一下。
阅读器的基本功能
首先来介绍一下电子书阅读器的基本功能：翻页、字体大小设置、背景主题色、进度等功能。完成这些功能，基本可以实现一个简单的阅读器了。下面就开始一一介绍各个功能的具体实现。
引入js文件
首先要引入epubjs文件（这好像是废话），此文件可以在网上搜搜下载，我在最后也添加了源码供大家下载，里面也有此文件。
<script src="../../js/epub.min.js"></script>
既然已经引入js文件了，那接下来就开搞，实现阅读器功能。
渲染电子书
首先html代码如下，用来盛放电子书。
<div id="reader" class="reader"></div>
有了盛放电子书的容器了，那我们就得解析电子书，然后放进去。下面是对电子书进行初始化解析：
vm.book = ePub(url);
这里url是图书的路径，这样可以得到图书的基本信息了。
然后对图书进行渲染，使用book.renderTo()方法控制图书在屏幕所占位置。
vm.rendition = vm.book.renderTo("reader", {
width: window.innerWidth,
height: vm.winHeight
});
vm.book.rendition.display();
renderTo有两个参数，第一个参数为div的id，将生成的dom挂在该div下面，第二个参数指定宽高。返回值是一个rendition对象，使用该对象对图书进行渲染操作。
完成上述操作，已经在网页中得到电子书的第一页了（如果有封面，第一页就是一张图）。
添加翻页功能
翻页功能使用rendition对象的prev()方法和next()方法实现翻上下页。
html代码
<div class="read-wrapper">
<div id="reader" class="reader"></div>
<a id="prev" href="#prev" rel="external nofollow" @click="prevPage()" class="arrow" style="width: 11%;">‹</a>
<a id="next" href="#next" rel="external nofollow" @click="nextPage()" class="arrow" style="width: 11%;">›</a>
</div>
js代码
prevPage: function () {
vm.rendition.prev();
},
nextPage: function () {
vm.rendition.next();
}
此处添加的点击翻页，两个按钮放在左右两侧，也可滑动翻页（看自己需求）。翻页的两个方法会返回一个promise对象，可进行后续操作，如翻页时进度变化（下面会介绍）。到这里已经可以正常的预览电子书了。是不是感觉很简单。
添加字号大小设置
字题大小设置也很简单，使用epubjs的themes对象即可实现，该对象提供了一个方法fontSize()，将参数传入即可修改字体大小。
//设置字体大小
setFontSize: function (fontSize) {
vm.defaultFontSize = fontSize;
//设置Theme对象
if (vm.rendition.themes) {
vm.rendition.themes.fontSize(fontSize + 'px');
}
}
背景主题色修改
与字体大小设置类似，也有现成方法，使用themes.select()方法即可对自定义的主题进行切换。
主题可以自定义颜色，代码如下
自定义主题：
themeList: [
{
name: '默认',
style: {
body: {
'color': '#000', 'background': '#fff'
}
}
},
......
]
修改主题色：
添加个修改的按钮即可
setTheme: function (index) {
vm.rendition.themes.select(vm.themeList[index].name);
vm.defaultTheme = index;
}
添加进度功能
使用html的input标签的range控件实现
html代码：
<div class="progress-wrapper">
<input class="progress" type="range" max="100" min="0" step="0.01"
@change="onProgressChange($event.target.value)"
@input="onProgressInput($event.target.value)" :value="progress"
:disabled="!bookAvailable" ref="progress">
</div>
介绍一下里面每个东西的大致意思。
1.类型是range的滑动控件，绑定值为progress，max是指progress最大值为100，min指progress最小值为0，step指定按照0.01的幅度进行增长。滑动一个，增长0.01。
2.@change事件，修改完成后触发的事件，即你点到那个进度后触发的，$event.target.value可以获取到最新的progress值。
3.@input是修改过程时触发的事件，即拖动滑块会触发(比如拖动滑块的时候，百分比进行变化)。
当然要实现进度改变，前提首先要进行分页（分页我理解的就是要得到整本书才能进行进度跳转），使用epubjs的location对象实现，写在book对象的钩子函数ready内。
vm.book.ready.then(() => {
//执行分页
return vm.book.locations.generate(750 * (window.innerWidth / 375));
}).then(result => {
console.log(result);
//获取locations对象
vm.locations = vm.book.locations;
})
以上操作已完成分页，然后通过location.cfiFromPercentage()方法获取百分比对应的epubcfi（epubcfi可定位到电子书任意一个字符），将epubcfi渲染即可跳到相应位置。注：在进度条可操作之前，必须是分页执行完之后得到location对象才可对进度条进行操作。（可添加一标识，判断location对象是否得到，未得到时提示进度条加载中，完成后显示在操作）。
//progress 进度条的数值(0-100)
onProgressChange: function (progress) {
vm.progress = progress;
var percentage = progress / 100;
vm.location = percentage > 0 ? vm.locations.cfiFromPercentage(percentage) : 0
vm.rendition.display(vm.location);
},
onProgressInput: function (progress) {
var percentage = progress / 100;
vm.location = percentage > 0 ? vm.locations.cfiFromPercentage(percentage) : 0
this.$refs.progress.style.backgroundSize = `${progress}% 100%`;
}
下面这个方法是修改进度数值。
以上已经完成进度了。上面说到翻页的时候进度也想实现变化，我们可以反过来考虑，获取当前页的百分比即可。首先通过rendition.currentLocation()获取当前页的信息，然后通过currentLocation.start.cfi获取当前页开始位置的epubcfi，将得到的结果传到locations.percentageFromCfi()内获取百分比，最后在调用改变进度数值的那个方法即可实现翻页进度变化。代码如下：
prevPage: function () {
vm.rendition.prev().then(() => {
vm.hideTitleAndMenu();
var currentLocation = vm.rendition.currentLocation();
var progress = Math.floor(((vm.locations.percentageFromCfi(currentLocation.start.cfi)).toFixed(5)) * 10000) / 100;
vm.progress = progress;
vm.onProgressInput(progress);
})
},
nextPage: function () {
vm.rendition.next().then(() => {
vm.hideTitleAndMenu();
var currentLocation = vm.rendition.currentLocation();
var progress = Math.floor(((vm.locations.percentageFromCfi(currentLocation.start.cfi)).toFixed(5)) * 10000) / 100;
vm.progress = progress;
vm.onProgressInput(progress);
})
}电子书目录
此功能也需要在book对象的钩子函数中添加，
vm.book.ready.then(() => {
vm.navigation = vm.book.navigation;//目录
console.log(vm.navigation);
//执行分页
return vm.book.locations.generate(750 * (window.innerWidth / 375));
}).then(result => {
console.log(result);
//获取locations对象
vm.locations = vm.book.locations;
console.log(vm.locations);
})
首先得到了navigation。
Navigation结构如下：
Navigation.toc表示电子书的目录结构，toc下的每一个元素对应一个目录，toc.href表示目录路径(链接)，toc.label是当前目录的名字。还有一个toc.subitems里面包含的是该目录下还有其他的二级(三级)目录，可根据需要使用几级目录。
将目录的路径渲染即可跳转到指定目录下。
//根据链接跳转到指定位置
jumpTo: function (href) {
vm.rendition.display(href);
}
以上就完成了基本的阅读器功能，基本的实现方法都已经列出，剩下的就是在阅读器中样式和点击事件的添加了，大佬可以自行添加尝试一下，如有什么问题或者错误请指出.
到此这篇关于vue+epubjs实现电子书阅读器的基本功能的文章就介绍到这了,更多相关vue epubjs电子书内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue项目使用localStorage+Vuex保存用户登录信息
这篇文章主要为大家详细介绍了Vue项目使用localStorage+Vuex保存用户登录信息，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
解读element el-upload上传的附件名称不显示 file-list赋值
这篇文章主要介绍了解读element el-upload上传的附件名称不显示 file-list赋值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
在Vue中可以使用Vue.prototype向Vue的全局作用域添加属性或方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-06-06
这篇文章主要介绍了vue中如何将日期转换为指定的格式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了详解vue 数组和对象渲染问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要给大家介绍了vue + canvas实现涂鸦面板的示例,文章通过代码示例介绍的非常详细,感兴趣的小伙伴跟着小编一起来看看吧2023-08-08
这篇文章主要介绍了vue中$refs的三种用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
vite2已经出来一段时间了,最近没忍住尝试了一下,这篇文章主要给大家介绍了关于利用Vite2和Vue3实现网站国际化的相关资料,需要的朋友可以参考下2021-08-08
在开发中我们经常遇到这样的需求,根据要求跳转至本页面指定位置,这篇文章主要给大家介绍了关于Vue3如何根据搜索框内容跳转至本页面指定位置的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue-router 导航完成后获取数据,通过使用生命周期的 created() 函数，在组件创建完成后调用该方法，本文结合实例代码给大家讲解的非常详细需要的朋友可以参考下2022-11-11
最新评论