vue+epubjs實(shí)現(xiàn)電子書閱讀器的基本功能
下面是項(xiàng)目需要,然后我在網(wǎng)上學(xué)習(xí)的如何使用epubjs制作簡(jiǎn)單閱讀器的大體過程，簡(jiǎn)單的記錄一下。
閱讀器的基本功能
首先來介紹一下電子書閱讀器的基本功能：翻頁(yè)、字體大小設(shè)置、背景主題色、進(jìn)度等功能。完成這些功能，基本可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的閱讀器了。下面就開始一一介紹各個(gè)功能的具體實(shí)現(xiàn)。
引入js文件
首先要引入epubjs文件（這好像是廢話），此文件可以在網(wǎng)上搜搜下載，我在最后也添加了源碼供大家下載，里面也有此文件。
<script src="../../js/epub.min.js"></script>
既然已經(jīng)引入js文件了，那接下來就開搞，實(shí)現(xiàn)閱讀器功能。
渲染電子書
首先html代碼如下，用來盛放電子書。
<div id="reader" class="reader"></div>
有了盛放電子書的容器了，那我們就得解析電子書，然后放進(jìn)去。下面是對(duì)電子書進(jìn)行初始化解析：
vm.book = ePub(url);
這里url是圖書的路徑，這樣可以得到圖書的基本信息了。
然后對(duì)圖書進(jìn)行渲染，使用book.renderTo()方法控制圖書在屏幕所占位置。
vm.rendition = vm.book.renderTo("reader", {
width: window.innerWidth,
height: vm.winHeight
});
vm.book.rendition.display();
renderTo有兩個(gè)參數(shù)，第一個(gè)參數(shù)為div的id，將生成的dom掛在該div下面，第二個(gè)參數(shù)指定寬高。返回值是一個(gè)rendition對(duì)象，使用該對(duì)象對(duì)圖書進(jìn)行渲染操作。
完成上述操作，已經(jīng)在網(wǎng)頁(yè)中得到電子書的第一頁(yè)了（如果有封面，第一頁(yè)就是一張圖）。
添加翻頁(yè)功能
翻頁(yè)功能使用rendition對(duì)象的prev()方法和next()方法實(shí)現(xiàn)翻上下頁(yè)。
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();
}
此處添加的點(diǎn)擊翻頁(yè)，兩個(gè)按鈕放在左右兩側(cè)，也可滑動(dòng)翻頁(yè)（看自己需求）。翻頁(yè)的兩個(gè)方法會(huì)返回一個(gè)promise對(duì)象，可進(jìn)行后續(xù)操作，如翻頁(yè)時(shí)進(jìn)度變化（下面會(huì)介紹）。到這里已經(jīng)可以正常的預(yù)覽電子書了。是不是感覺很簡(jiǎn)單。
添加字號(hào)大小設(shè)置
字題大小設(shè)置也很簡(jiǎn)單，使用epubjs的themes對(duì)象即可實(shí)現(xiàn)，該對(duì)象提供了一個(gè)方法fontSize()，將參數(shù)傳入即可修改字體大小。
//設(shè)置字體大小
setFontSize: function (fontSize) {
vm.defaultFontSize = fontSize;
//設(shè)置Theme對(duì)象
if (vm.rendition.themes) {
vm.rendition.themes.fontSize(fontSize + 'px');
}
}
背景主題色修改
與字體大小設(shè)置類似，也有現(xiàn)成方法，使用themes.select()方法即可對(duì)自定義的主題進(jìn)行切換。
主題可以自定義顏色，代碼如下
自定義主題：
themeList: [
{
name: '默認(rèn)',
style: {
body: {
'color': '#000', 'background': '#fff'
}
}
},
......
]
修改主題色：
添加個(gè)修改的按鈕即可
setTheme: function (index) {
vm.rendition.themes.select(vm.themeList[index].name);
vm.defaultTheme = index;
}
添加進(jìn)度功能
使用html的input標(biāo)簽的range控件實(shí)現(xiàn)
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>
介紹一下里面每個(gè)東西的大致意思。
1.類型是range的滑動(dòng)控件，綁定值為progress，max是指progress最大值為100，min指progress最小值為0，step指定按照0.01的幅度進(jìn)行增長(zhǎng)?；瑒?dòng)一個(gè)，增長(zhǎng)0.01。
2.@change事件，修改完成后觸發(fā)的事件，即你點(diǎn)到那個(gè)進(jìn)度后觸發(fā)的，$event.target.value可以獲取到最新的progress值。
3.@input是修改過程時(shí)觸發(fā)的事件，即拖動(dòng)滑塊會(huì)觸發(fā)(比如拖動(dòng)滑塊的時(shí)候，百分比進(jìn)行變化)。
當(dāng)然要實(shí)現(xiàn)進(jìn)度改變，前提首先要進(jìn)行分頁(yè)（分頁(yè)我理解的就是要得到整本書才能進(jìn)行進(jìn)度跳轉(zhuǎn)），使用epubjs的location對(duì)象實(shí)現(xiàn)，寫在book對(duì)象的鉤子函數(shù)ready內(nèi)。
vm.book.ready.then(() => {
//執(zhí)行分頁(yè)
return vm.book.locations.generate(750 * (window.innerWidth / 375));
}).then(result => {
console.log(result);
//獲取locations對(duì)象
vm.locations = vm.book.locations;
})
以上操作已完成分頁(yè)，然后通過location.cfiFromPercentage()方法獲取百分比對(duì)應(yīng)的epubcfi（epubcfi可定位到電子書任意一個(gè)字符），將epubcfi渲染即可跳到相應(yīng)位置。注：在進(jìn)度條可操作之前，必須是分頁(yè)執(zhí)行完之后得到location對(duì)象才可對(duì)進(jìn)度條進(jìn)行操作。（可添加一標(biāo)識(shí)，判斷l(xiāng)ocation對(duì)象是否得到，未得到時(shí)提示進(jìn)度條加載中，完成后顯示在操作）。
//progress 進(jìn)度條的數(shù)值(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%`;
}
下面這個(gè)方法是修改進(jìn)度數(shù)值。
以上已經(jīng)完成進(jìn)度了。上面說到翻頁(yè)的時(shí)候進(jìn)度也想實(shí)現(xiàn)變化，我們可以反過來考慮，獲取當(dāng)前頁(yè)的百分比即可。首先通過rendition.currentLocation()獲取當(dāng)前頁(yè)的信息，然后通過currentLocation.start.cfi獲取當(dāng)前頁(yè)開始位置的epubcfi，將得到的結(jié)果傳到locations.percentageFromCfi()內(nèi)獲取百分比，最后在調(diào)用改變進(jìn)度數(shù)值的那個(gè)方法即可實(shí)現(xiàn)翻頁(yè)進(jìn)度變化。代碼如下：
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對(duì)象的鉤子函數(shù)中添加，
vm.book.ready.then(() => {
vm.navigation = vm.book.navigation;//目錄
console.log(vm.navigation);
//執(zhí)行分頁(yè)
return vm.book.locations.generate(750 * (window.innerWidth / 375));
}).then(result => {
console.log(result);
//獲取locations對(duì)象
vm.locations = vm.book.locations;
console.log(vm.locations);
})
首先得到了navigation。
Navigation結(jié)構(gòu)如下：
Navigation.toc表示電子書的目錄結(jié)構(gòu)，toc下的每一個(gè)元素對(duì)應(yīng)一個(gè)目錄，toc.href表示目錄路徑(鏈接)，toc.label是當(dāng)前目錄的名字。還有一個(gè)toc.subitems里面包含的是該目錄下還有其他的二級(jí)(三級(jí))目錄，可根據(jù)需要使用幾級(jí)目錄。
將目錄的路徑渲染即可跳轉(zhuǎn)到指定目錄下。
//根據(jù)鏈接跳轉(zhuǎn)到指定位置
jumpTo: function (href) {
vm.rendition.display(href);
}
以上就完成了基本的閱讀器功能，基本的實(shí)現(xiàn)方法都已經(jīng)列出，剩下的就是在閱讀器中樣式和點(diǎn)擊事件的添加了，大佬可以自行添加嘗試一下，如有什么問題或者錯(cuò)誤請(qǐng)指出.
到此這篇關(guān)于vue+epubjs實(shí)現(xiàn)電子書閱讀器的基本功能的文章就介紹到這了,更多相關(guān)vue epubjs電子書內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3 添加編輯頁(yè)使用 cron 表達(dá)式生成方法小結(jié)
這篇文章主要介紹了vue3 添加編輯頁(yè)使用 cron 表達(dá)式生成方法小結(jié),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-12-12
本文主要介紹了vue父子組件之間的傳參的幾種方式小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
VUE3大屏自適應(yīng)布局的幾種實(shí)現(xiàn)方式
本文主要介紹了基于SCSS自定義vw和vh函數(shù)實(shí)現(xiàn)響應(yīng)式布局的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-10-10
基于vue和react的spa進(jìn)行按需加載的實(shí)現(xiàn)方法
這篇文章主要介紹了基于vue和react的spa進(jìn)行按需加載,需要的朋友可以參考下2018-09-09
Vue微信公眾號(hào)網(wǎng)頁(yè)分享的示例代碼
這篇文章主要介紹了Vue微信公眾號(hào)網(wǎng)頁(yè)分享的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
vue使用混入定義全局變量、函數(shù)、篩選器的實(shí)例代碼
本文主要是給大家分享利用混入mixins來實(shí)現(xiàn)全局變量和函數(shù)。這種方法優(yōu)點(diǎn)是ide會(huì)有方法、變量、篩選器提示。對(duì)vue中 利用混入定義全局變量、函數(shù)、篩選器的相關(guān)知識(shí)感興趣的朋友，跟隨小編一起看看吧2019-07-07
本文主要介紹了Vue虛擬Dom到真實(shí)Dom的轉(zhuǎn)換，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07
Vue項(xiàng)目在樣式文件中使用js定義的變量方法示例
在Vue中要在style標(biāo)簽中使用JavaScript變量,這篇文章主要介紹了Vue項(xiàng)目在樣式文件中使用js定義的變量的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-05-05
這篇文章主要介紹了Vue組件模板的幾種書寫形式(3種)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要給大家介紹了關(guān)于vue通過video.js解決m3u8視頻播放格式的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07