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