腳本之家服務器常用軟件

快捷導航

vue+epubjs實現(xiàn)電子書閱讀器的基本功能

更新時間：2023年11月03日 15:43:04 作者：福爾摩杰

這篇文章主要為大家詳細介紹了如何使用vue+epubjs實現(xiàn)電子書閱讀器的基本功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下

閱讀器的基本功能

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

引入js文件

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

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

既然已經引入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對象，使用該對象對圖書進行渲染操作。

完成上述操作，已經在網頁中得到電子書的第一頁了（如果有封面，第一頁就是一張圖）。

添加翻頁功能

翻頁功能使用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();
}

此處添加的點擊翻頁，兩個按鈕放在左右兩側，也可滑動翻頁（看自己需求）。翻頁的兩個方法會返回一個promise對象，可進行后續(xù)操作，如翻頁時進度變化（下面會介紹）。到這里已經可以正常的預覽電子書了。是不是感覺很簡單。

添加字號大小設置

字題大小設置也很簡單，使用epubjs的themes對象即可實現(xiàn)，該對象提供了一個方法fontSize()，將參數(shù)傳入即可修改字體大小。

//設置字體大小
setFontSize: function (fontSize) {
    vm.defaultFontSize = fontSize;
    //設置Theme對象
    if (vm.rendition.themes) {
        vm.rendition.themes.fontSize(fontSize + 'px');
    }
}

背景主題色修改

與字體大小設置類似，也有現(xiàn)成方法，使用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控件實現(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ā)(比如拖動滑塊的時候，百分比進行變化)。

當然要實現(xiàn)進度改變，前提首先要進行分頁（分頁我理解的就是要得到整本書才能進行進度跳轉），使用epubjs的location對象實現(xiàn)，寫在book對象的鉤子函數(shù)ready內。

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()方法獲取百分比對應的epubcfi（epubcfi可定位到電子書任意一個字符），將epubcfi渲染即可跳到相應位置。注：在進度條可操作之前，必須是分頁執(zhí)行完之后得到location對象才可對進度條進行操作。（可添加一標識，判斷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ù)值。

以上已經完成進度了。上面說到翻頁的時候進度也想實現(xiàn)變化，我們可以反過來考慮，獲取當前頁的百分比即可。首先通過rendition.currentLocation()獲取當前頁的信息，然后通過currentLocation.start.cfi獲取當前頁開始位置的epubcfi，將得到的結果傳到locations.percentageFromCfi()內獲取百分比，最后在調用改變進度數(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結構如下：

Navigation.toc表示電子書的目錄結構，toc下的每一個元素對應一個目錄，toc.href表示目錄路徑(鏈接)，toc.label是當前目錄的名字。還有一個toc.subitems里面包含的是該目錄下還有其他的二級(三級)目錄，可根據(jù)需要使用幾級目錄。

//根據(jù)鏈接跳轉到指定位置
jumpTo: function (href) {
    vm.rendition.display(href);
}

以上就完成了基本的閱讀器功能，基本的實現(xiàn)方法都已經列出，剩下的就是在閱讀器中樣式和點擊事件的添加了，大佬可以自行添加嘗試一下，如有什么問題或者錯誤請指出.

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

您可能感興趣的文章:

Vue使用epubjs電子書的教程詳解

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue+epubjs實現(xiàn)電子書閱讀器的基本功能

目錄

閱讀器的基本功能

引入js文件

渲染電子書

添加翻頁功能

添加字號大小設置

背景主題色修改

添加進度功能

電子書目錄

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具