使用vuejs+epubjs实现电子书阅读器的基本功能

前端 专栏收录该内容
3 篇文章 0 订阅

这是我第一次写博客,有点紧张,新手还不太会操作,如果不合理的地方希望大佬指点 谢谢。下面是项目需要,然后我在网上学习的如何使用epubjs制作简单阅读器的大体过程(网上有个老师讲的感觉还是不错的,他使用的是纯vue开发,而我使用的html+jq并引用了vuejs的,还是有些区别的 哈哈。不过还是给大家推荐一下这个教程)。简单的记录一下。(^ __^)

阅读器的基本功能

首先来介绍一下电子书阅读器的基本功能:翻页、字体大小设置、背景主题色、进度等功能。完成这些功能,基本可以实现一个简单的阅读器了。下面就开始一一介绍各个功能的具体实现。

引入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" @click="prevPage()" class="arrow" style="width: 11%;"></a>
    <a id="next" href="#next" @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);
}

以上就完成了基本的阅读器功能,基本的实现方法都已经列出,剩下的就是在阅读器中样式和点击事件的添加了,大佬可以自行添加尝试一下,如有什么问题或者错误请指出,然后大家讨论一下,新手请多关照。o(∩_∩)o

源码下载

代码下载

  • 6
    点赞
  • 9
    评论
  • 24
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:书香水墨 设计师:CSDN官方博客 返回首页

打赏作者

福尔摩杰

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值