下面是項(xiàng)目需要,然后我在網(wǎng)上學(xué)習(xí)的如何使用epubjs制作簡(jiǎn)單閱讀器的大體過(guò)程，簡(jiǎn)單的記錄一下。

閱讀器的基本功能

首先來(lái)介紹一下電子書(shū)閱讀器的基本功能：翻頁(yè)、字體大小設(shè)置、背景主題色、進(jìn)度等功能。完成這些功能，基本可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的閱讀器了。下面就開(kāi)始一一介紹各個(gè)功能的具體實(shí)現(xiàn)。

引入js文件

首先要引入epubjs文件（這好像是廢話），此文件可以在網(wǎng)上搜搜下載，我在最后也添加了源碼供大家下載，里面也有此文件。

<script src="../../js/epub.min.js"></script>

既然已經(jīng)引入js文件了，那接下來(lái)就開(kāi)搞，實(shí)現(xiàn)閱讀器功能。

渲染電子書(shū)

首先html代碼如下，用來(lái)盛放電子書(shū)。

<div id="reader" class="reader"></div>

有了盛放電子書(shū)的容器了，那我們就得解析電子書(shū)，然后放進(jìn)去。下面是對(duì)電子書(shū)進(jìn)行初始化解析：

vm.book = ePub(url);

這里url是圖書(shū)的路徑，這樣可以得到圖書(shū)的基本信息了。

然后對(duì)圖書(shū)進(jìn)行渲染，使用book.renderTo()方法控制圖書(shū)在屏幕所占位置。

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ì)圖書(shū)進(jìn)行渲染操作。

完成上述操作，已經(jīng)在網(wǎng)頁(yè)中得到電子書(shū)的第一頁(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ù)覽電子書(shū)了。是不是感覺(jué)很簡(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è)置類(lèi)似，也有現(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.類(lèi)型是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是修改過(guò)程時(shí)觸發(fā)的事件，即拖動(dòng)滑塊會(huì)觸發(fā)(比如拖動(dòng)滑塊的時(shí)候，百分比進(jìn)行變化)。

當(dāng)然要實(shí)現(xiàn)進(jìn)度改變，前提首先要進(jìn)行分頁(yè)（分頁(yè)我理解的就是要得到整本書(shū)才能進(jìn)行進(jìn)度跳轉(zhuǎn)），使用epubjs的location對(duì)象實(shí)現(xiàn)，寫(xiě)在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è)，然后通過(guò)location.cfiFromPercentage()方法獲取百分比對(duì)應(yīng)的epubcfi（epubcfi可定位到電子書(shū)任意一個(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)度了。上面說(shuō)到翻頁(yè)的時(shí)候進(jìn)度也想實(shí)現(xiàn)變化，我們可以反過(guò)來(lái)考慮，獲取當(dāng)前頁(yè)的百分比即可。首先通過(guò)rendition.currentLocation()獲取當(dāng)前頁(yè)的信息，然后通過(guò)currentLocation.start.cfi獲取當(dāng)前頁(yè)開(kāi)始位置的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);
    })
}

電子書(shū)目錄

此功能也需要在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表示電子書(shū)的目錄結(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)擊事件的添加了，大佬可以自行添加嘗試一下，如有什么問(wèn)題或者錯(cuò)誤請(qǐng)指出.

到此這篇關(guān)于vue+epubjs實(shí)現(xiàn)電子書(shū)閱讀器的基本功能的文章就介紹到這了,更多相關(guān)vue epubjs電子書(shū)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論