vue+epubjs實現(xiàn)電子書閱讀器的基本功能
下面是項目需要,然后我在網(wǎng)上學(xué)習(xí)的如何使用epubjs制作簡單閱讀器的大體過程，簡單的記錄一下。
閱讀器的基本功能
首先來介紹一下電子書閱讀器的基本功能：翻頁、字體大小設(shè)置、背景主題色、進(jìn)度等功能。完成這些功能，基本可以實現(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>
有了盛放電子書的容器了，那我們就得解析電子書，然后放進(jìn)去。下面是對電子書進(jìn)行初始化解析：
vm.book = ePub(url);
這里url是圖書的路徑，這樣可以得到圖書的基本信息了。
然后對圖書進(jìn)行渲染，使用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ìn)行渲染操作。
完成上述操作，已經(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對象，可進(jìn)行后續(xù)操作，如翻頁時進(jìn)度變化（下面會介紹）。到這里已經(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()方法即可對自定義的主題進(jìn)行切換。
主題可以自定義顏色，代碼如下
自定義主題：
themeList: [
{
name: '默認(rèn)',
style: {
body: {
'color': '#000', 'background': '#fff'
}
}
},
......
]
修改主題色：
添加個修改的按鈕即可
setTheme: function (index) {
vm.rendition.themes.select(vm.themeList[index].name);
vm.defaultTheme = index;
}
添加進(jìn)度功能
使用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的幅度進(jìn)行增長?；瑒右粋€，增長0.01。
2.@change事件，修改完成后觸發(fā)的事件，即你點到那個進(jìn)度后觸發(fā)的，$event.target.value可以獲取到最新的progress值。
3.@input是修改過程時觸發(fā)的事件，即拖動滑塊會觸發(fā)(比如拖動滑塊的時候，百分比進(jìn)行變化)。
當(dāng)然要實現(xiàn)進(jìn)度改變，前提首先要進(jìn)行分頁（分頁我理解的就是要得到整本書才能進(jìn)行進(jì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)位置。注：在進(jìn)度條可操作之前，必須是分頁執(zhí)行完之后得到location對象才可對進(jìn)度條進(jìn)行操作。（可添加一標(biāo)識，判斷l(xiāng)ocation對象是否得到，未得到時提示進(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%`;
}
下面這個方法是修改進(jìn)度數(shù)值。
以上已經(jīng)完成進(jìn)度了。上面說到翻頁的時候進(jìn)度也想實現(xiàn)變化，我們可以反過來考慮，獲取當(dāng)前頁的百分比即可。首先通過rendition.currentLocation()獲取當(dāng)前頁的信息，然后通過currentLocation.start.cfi獲取當(dāng)前頁開始位置的epubcfi，將得到的結(jié)果傳到locations.percentageFromCfi()內(nèi)獲取百分比，最后在調(diào)用改變進(jìn)度數(shù)值的那個方法即可實現(xiàn)翻頁進(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對象的鉤子函數(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)文章
Vue項目使用localStorage+Vuex保存用戶登錄信息
這篇文章主要為大家詳細(xì)介紹了Vue項目使用localStorage+Vuex保存用戶登錄信息，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
解讀element?el-upload上傳的附件名稱不顯示?file-list賦值
這篇文章主要介紹了解讀element?el-upload上傳的附件名稱不顯示?file-list賦值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
在Vue中可以使用Vue.prototype向Vue的全局作用域添加屬性或方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06
這篇文章主要介紹了vue中如何將日期轉(zhuǎn)換為指定的格式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了詳解vue 數(shù)組和對象渲染問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要給大家介紹了vue + canvas實現(xiàn)涂鴉面板的示例,文章通過代碼示例介紹的非常詳細(xì),感興趣的小伙伴跟著小編一起來看看吧2023-08-08
這篇文章主要介紹了vue中$refs的三種用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
利用Vite2和Vue3實現(xiàn)網(wǎng)站國際化的全過程
vite2已經(jīng)出來一段時間了,最近沒忍住嘗試了一下,這篇文章主要給大家介紹了關(guān)于利用Vite2和Vue3實現(xiàn)網(wǎng)站國際化的相關(guān)資料,需要的朋友可以參考下2021-08-08
Vue3如何根據(jù)搜索框內(nèi)容跳轉(zhuǎn)至本頁面指定位置
在開發(fā)中我們經(jīng)常遇到這樣的需求,根據(jù)要求跳轉(zhuǎn)至本頁面指定位置,這篇文章主要給大家介紹了關(guān)于Vue3如何根據(jù)搜索框內(nèi)容跳轉(zhuǎn)至本頁面指定位置的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue-router?導(dǎo)航完成后獲取數(shù)據(jù)的實現(xiàn)方法
這篇文章主要介紹了vue-router?導(dǎo)航完成后獲取數(shù)據(jù),通過使用生命周期的 created() 函數(shù)，在組件創(chuàng)建完成后調(diào)用該方法，本文結(jié)合實例代碼給大家講解的非常詳細(xì)需要的朋友可以參考下2022-11-11