使用epubjs开发一个电子书阅读页面

以下功能包括，阅读epub电子书，上一张，下一章，左翻页，右翻页，目录，设置字体，背景色，书签等功能，使用uniapp框架开发，遇到许多问题，现在是一个完整的功能，以后用到可以使用。
html

<template><view><scroll-view scroll-y class="page DrawerPage" :class="modalName=='viewModal'?'show':''"><cu-custom bgColor="bg-gradual-blue" :isBack="true" v-show="ifShowMenu"><block slot="backText">返回</block><block slot="content">{{bookInfo.title}}</block></cu-custom><scroll-view scroll-y class="bg-white" style="padding-bottom: 80px;" :style="[{height:'calc(100vh - '+ this.CustomBar +'px + 50px)','background':themeList[defaultTheme].style.body.background}]"><view id="book"></view></scroll-view><view style="padding: 0 20px 0;" class="cu-bar tabbar bg-white shadow foot" v-show="ifShowMenu"><view class="action" @tap="prevPage"><view>上一章</view></view><view class="action"><text class="lg text-gray cuIcon-settings float-book-setting" style="font-size: 40upx;" @tap="setSettingRightPx" :class="{'float-book-setting-active':settingRightPx}"></text></view><view class="action" @tap="nextPage"><view>下一章</view></view></view><uniTransition :show="settingRightPx" :modeClass="['slide-bottom']" :duration="500" @change="changeTools" class="setting-tools"><view class="setting-content-view"><text class="setting-font-size">大小：</text><slider class="setting-font-size-val" @change="intervalFontSizeChange" :value="interval" show-value min="10" max="22" /></view><view class="setting-content-view"><text class="setting-font-bg">背景：</text><view class="setting-font-bg-val"><view class="text-center setting-font-bg-txt" :style="{'background':item.style.body.background}" @tap="setTheme(index)" v-for="(item,index) in themeList" :key="index"></view></view></view><button class="cu-btn block line-orange lg"  @tap="showBookMarkList"><text class="cuIcon-list"></text> 书签</button><button class="cu-btn block line-orange lg"  @tap="tabSelect" data-target="viewModal"><text class="cuIcon-list"></text> 目录</button><button class="cu-btn block bg-grey lg" @tap="setSettingRightPx"><text class="cuIcon-close"></text> 关闭</button></uniTransition></scroll-view><!-- 二级菜单 --><view class="DrawerClose" :class="modalName=='viewModal'?'show':''" @tap="hideModal"><text class="cuIcon-pullright"></text></view><scroll-view scroll-y class="DrawerWindow" :class="modalName=='viewModal'?'show':''"><view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg"><view class="cu-item arrow" v-for="(item,index) in navigation" :key="index"><view class="content" @tap="selectList(item)"><text class="cuIcon-github text-grey"></text><text class="text-grey">{{item.label}}</text></view></view></view></scroll-view><!-- 书签弹框 --><view class="cu-modal" :class="bookMarkShow?'show':''"><view class="cu-dialog"><view class="cu-bar bg-white justify-end"><view class="content">书签</view><view class="action" @tap="hideBookMark"><text class="cuIcon-close text-red"></text></view></view><view class="padding-xl">书签名：<input placeholder="请输入书签名" v-model="bookMarkName"></input></view><view class="cu-bar bg-white justify-end"><view class="action"><button class="cu-btn line-green text-green" @tap="hideBookMark()">取消</button><button class="cu-btn bg-green margin-left" @tap="saveBookMark()">确定</button></view></view></view></view><!-- 书签列表 --><view class="cu-modal drawer-modal justify-end" :class="bookMarkListShow?'show':''" @tap="hideBookMarkList()"><view class="cu-dialog basis-lg" @tap.stop="" :style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]"><view class="cu-list menu text-left"><view class="cu-item arrow" v-for="(item,index) in bookMarkList" :key="index"><view class="content"><view @tap="toMark(item)">{{item.bookmarkname}}</view></view></view></view></view></view></view>
</template>


<script>import Epub from 'epubjs'import uniTransition from "../../colorui/components/uni-transition.vue"export default {components: {uniTransition},data() {return {contentHideHeight:'calc(100vh - '+ this.CustomBar +'px + 50px)',contentShowHeight:'calc(100vh - '+ this.CustomBar +'px - 50px)',ifShowMenu:true,settingRightPx:false,CustomBar: this.CustomBar,interval: 16,bookInfo:{},showTopBar: true,rendition: null,defaultFontSize: 16,defaultTheme: 3,themeList: [{name: 'default',style: { body: {'color': '#000', 'background': '#fff'}}},{name: 'eye',style: {body: {'color': '#000', 'background': '#ceeaba',}}},{name: 'night',style: {body: {'color': '#fff', 'background': '#000'}}},{name: 'gold',style: {body: {'color': '#000', 'background': 'rgb(241,236,226)',}}}],modalName: null,navigation:[],locations:null,bookMarkShow:false,touchStartTime:0,bookMarkName:"",bookMarkListShow:false,bookMarkList:[]}},onReady:function(){console.log("页面初始化");},onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数if(!option.bookId){uni.showLoading({title: '电子书加载异常'});return;}uni.showLoading({title: '电子书加载中'});this.$http({url:'/library/app/cnoocebook/bookInfo',data:{"bookId":option.bookId},method: "GET"}).then(response=>{uni.hideLoading();if(response.data){this.bookInfo=response.data;this.readEBook();}}).catch(error=>{uni.showToast({icon: 'none',title: error,duration: 2000});});},methods: {//阅读电子书readEBook(){//从本地缓存中获取字体大小设置const fontSize=uni.getStorageSync('font_size');this.defaultFontSize = fontSize?fontSize:16;this.interval=this.defaultFontSize;//从本地缓存中获取主题设置const theme=uni.getStorageSync('default_theme')this.defaultTheme = theme?theme:3;let DOWNLOAD_URL = "https://xxxx/"+this.bookInfo.eid;this.book = new Epub(DOWNLOAD_URL)this.rendition = this.book.renderTo('book', {//滚动翻页// flow: "paginated",flow: 'scrolled-doc',width: window.innerWidth,height: window.innerHeight,method: 'default',restore: false});this.rendition.display();//内容加载完后进行回调this.rendition.hooks.content.register((contents) => {uni.hideLoading();this.scalePage(contents.content);});//图书解析完毕回调this.book.ready.then(() => {// 生成目录this.navigation = this.book.navigation.toc;console.log(this.navigation);// 生成Locations对象let generate = this.book.locations.generate()console.log(generate);return generate;}).then(result => {// 保存locations对象this.locations = this.book.locations;console.log(this.locations);})// 获取Theme对象this.themes = this.rendition.themes// 设置默认字体this.setFontSize(this.defaultFontSize)//初始化主题this.registerTheme()// 设置默认主题this.setTheme(this.defaultTheme)//左右滑动翻页点击开始this.rendition.on('touchstart', e => {this.touchStartX = e.changedTouches[0].pageX;this.touchStartY = e.changedTouches[0].pageY;this.touchStartTime = e.timeStamp;});//左右翻页，显示隐藏操作菜单，显示书签弹框this.rendition.on('touchend', e => {const offsetX = e.changedTouches[0].pageX - this.touchStartXconst offsetY = e.changedTouches[0].pageY - this.touchStartYconst time = event.timeStamp - this.touchStartTimeif (time<500&&Math.abs(offsetX) > (Math.abs(offsetY)+50) && offsetX > 100) {this.prevPage();} else if (time<500&&Math.abs(offsetX) > (Math.abs(offsetY)+50) && offsetX < -100) {this.nextPage();}else if(time<500&&offsetX==0 && offsetY == 0){this.showMenu();}else if(time>=500){this.bookMarkShow=true;}});},//设置页面中图片的大小scalePage(body){let images = body.getElementsByTagName("img");let iheight = body.clientHeight,oheight;for (let i = 0; i < images.length; i++) {images[i].style.width='100%';}},//设置按钮显示隐藏setSettingRightPx(){if(this.settingRightPx){this.settingRightPx=false;}else{this.settingRightPx=true;}},//改变字体大小intervalFontSizeChange(e) {console.log(e.target.value);this.interval = e.target.valuethis.setFontSize(this.interval);},//上一页prevPage() {if (this.rendition) {uni.showLoading({title: '电子书加载中'});this.rendition.prev().then((data) => {uni.hideLoading();})}},//下一页nextPage() {if (this.rendition) {uni.showLoading({title: '电子书加载中'});this.rendition.next().then((data) => {uni.hideLoading();})}},//跳转到指定页toHref(href) {this.rendition.display(href);},//设置背景色setTheme(index) {this.themes.select(this.themeList[index].name);this.defaultTheme = index;uni.setStorage({key: 'default_theme',data: this.defaultTheme,success: function () {console.log('主题设置成功');}});},//注册背景色registerTheme() {this.themeList.forEach(theme => {this.themes.register(theme.name, theme.style)})},//设置字体大小setFontSize(fontSize) {this.defaultFontSize = fontSizeif (this.themes) {this.themes.fontSize(fontSize + 'px')uni.setStorage({key: 'font_size',data: fontSize,success: function () {console.log('字体大小设置成功');}});}},//选中一级菜单，同时显示二级菜单页面tabSelect(e) {this.tabCur = e.currentTarget.dataset.id;this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;this.modalName = e.currentTarget.dataset.target;},//隐藏二级菜单hideModal(e) {this.modalName = null},//选择二级菜单触发事件selectList(data) {console.log(JSON.stringify(data));this.hideModal();this.toHref(data.href);this.settingRightPx=false;},//显示菜单showMenu(){this.ifShowMenu = ! this.ifShowMenu;},//隐藏标签弹框hideBookMark(){this.bookMarkShow=false;},//保存书签saveBookMark(){if(!this.bookMarkName){uni.showToast({icon: 'none',title: "请输入书签名再提交",duration: 2000});return false;}//得到当前书签的百分比数let bookMark=(this.rendition.location.start.percentage).toFixed(4);//保存书签this.$http({url:'/library/app/bookmark/save',data:{"bookid":this.bookInfo.id,"bookmarkname":this.bookMarkName,"bookmarkpercentage":bookMark},method: "POST"}).then(response=>{if(response.code==0){uni.showToast({title: '书签保存成功',duration: 2000});this.bookMarkShow=false;}}).catch(error=>{uni.showToast({icon: 'none',title: error,duration: 2000});});},//隐藏书签列表hideBookMarkList(){this.bookMarkListShow=false;},//显示书签列表showBookMarkList(){this.$http({url:'/library/app/bookmark/getList',data:{"bookid":this.bookInfo.id},method: "GET"}).then(response=>{if(response.code==0){this.bookMarkListShow=true;this.settingRightPx=false;this.bookMarkList=response.list;}}).catch(error=>{uni.showToast({icon: 'none',title: error,duration: 2000});});},//跳转书签toMark(mark){const location = this.locations.cfiFromPercentage(mark.bookmarkpercentage);this.rendition.display(location);this.bookMarkListShow=false;}}}
</script>

css

<style>
.float-book-setting{line-height: 60upx;border-radius: 40upx;-webkit-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: -webkit-transform .3s;transition: -webkit-transform .3s;transition: transform .3s;transition: transform .3s,-webkit-transform .3s;
}
.float-book-setting-active{-webkit-transform: rotate(135deg);transform: rotate(135deg);
}
.setting-tools{position: fixed;width: 100%;bottom: 0;z-index: 1025;box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);background-color: white;
}
.setting-font-size{position: absolute;
}
.setting-font-size-val{margin-left: 100upx;
}
.setting-font-bg{position: absolute;
}
.setting-font-bg-val{margin-left: 100upx;
}
.setting-font-bg-txt{margin: 10upx;width: 40upx;height: 40upx;float: left;border: 1px solid #eeee;box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
}
.setting-dir{text-align: center;height: 35px;line-height: 35px;
}.setting-close{text-align: center;height: 35px;line-height: 35px;
}
.setting-content-view{height: 100upx;line-height: 100upx;margin: 0 10px 0;
}page {background-image: var(--gradualBlue);width: 100vw;overflow: hidden;}.DrawerPage {position: fixed;width: 100vw;height: 100vh;left: 0vw;background-color: #f1f1f1;transition: all 0.4s;}.DrawerPage.show {transform: scale(0.9, 0.9);left: 85vw;box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);transform-origin: 0;}.DrawerWindow {position: absolute;width: 85vw;height: 100vh;left: 0;top: 0;transform: scale(0.9, 0.9) translateX(-100%);opacity: 0;pointer-events: none;transition: all 0.4s;padding: 100upx 0;}.DrawerWindow.show {transform: scale(1, 1) translateX(0%);opacity: 1;pointer-events: all;}.DrawerClose {position: absolute;width: 40vw;height: 100vh;right: 0;top: 0;color: transparent;padding-bottom: 30upx;display: flex;align-items: flex-end;justify-content: center;background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));letter-spacing: 5px;font-size: 50upx;opacity: 0;pointer-events: none;transition: all 0.4s;}.DrawerClose.show {opacity: 1;pointer-events: all;width: 15vw;color: #fff;padding-bottom: 60px;}.DrawerPage .cu-bar.tabbar .action button.cuIcon {width: 64upx;height: 64upx;line-height: 64upx;margin: 0;display: inline-block;}.DrawerPage .cu-bar.tabbar .action .cu-avatar {margin: 0;}.DrawerPage .nav {flex: 1;}.DrawerPage .nav .cu-item.cur {border-bottom: 0;position: relative;}.DrawerPage .nav .cu-item.cur::after {content: "";width: 10upx;height: 10upx;background-color: currentColor;position: absolute;bottom: 10upx;border-radius: 10upx;left: 0;right: 0;margin: auto;}.DrawerPage .cu-bar.tabbar .action {flex: initial;}
</style>

使用epubjs开发一个电子书阅读页面相关推荐

微信小程序｜基于小程序+C#制作一个电子书阅读器
文章目录一.文章前言二.开发流程 2.1.开发工具 2.2.页面实现 2.3.数据库设计 2.4.API实现一.文章前言书籍是人类进步的阶梯,各位小伙伴在使用市面上各类阅读器进行阅读的时候是否 ...
“开发一个静态 HTML 页面，我要价 18000 美元，有错吗？”
作者 | Ibrahim Diallo 译者 | 王艳妮,责编 | 屠敏出品 | CSDN(ID:CSDNnews) 在信息加速发展的互联网时代,越来越多的科技公司为了专注核心竞争力业务以及降低软件 ...
【移动端 Web】怎么循序渐进地开发一个移动端页面
1. 移动页面开发基础 1.1 像素--什么是像素像素是 Web 页面布局的基础,那么到底什么才是一个像素呢? 像素:一个像素就是计算机屏幕所能显示一种特定颜色的最小区域.这是像素的概念,实际上,W ...
ANDROID 开发一个新闻阅读器之新闻列表
1．功能描述这一讲中我们将对如何实现新闻列表做一个详细的介绍,新闻列表会把所有我们从网上获取的新闻的标题显示给用户,用户通过阅读标题,选择自己想要查看的新闻,进入具体的新闻显示页 ...
安卓电子书格式_[技巧] 无敌的boss级电子书阅读app，全能高手就要一个打十个。...
上期介绍了强大的阅读器AIReader 支持近20种阅读格式缺点是界面操作不够简洁美观且不支持pdf格式但它已经很强了本期介绍一款更为强大到无敌的电子书阅读器名为静读天下话不多少先上图 ▽▽ ...
Reader电子书阅读器优化实战(一)
我今天主要说的电子书阅读器源码如下:https://github.com/GGGHub/Reader.首先要感谢原作者的分享,有一个完整的,能运行的电子书阅读器demo.让我们为作者的这种开源精神 ...
4款好用的PC端电子书阅读软件，千万别错过
分享4款好用的电子书阅读软件,支持多种电子书格式阅读,并且阅读界面舒适可随意调整,大家快去试试吧! 1.百度阅读器精简版支持阅读的格式:TXT.PDF 一个百度推出的电子书阅读软件,简单小巧,体积只 ...
office电子书_掌阅推出首款彩屏电子书阅读器，用它看漫画体验到底如何？
它作为传统电子书阅读器的延伸,在保留护眼.省电等特性的基础下,还可以显示彩色内容. 从 1996 年诞生于麻省理工实验室起,电子墨水屏技术已经发展了 20 多年,不过它的变化好像一直很少,最常见的应用 ...
calibre-ebook 电子书阅读工具
calibre-ebook是一个电子书阅读工具,其官网地址为:https://calibre-ebook.com calibre is a powerful and easy to use e-boo ...

使用epubjs开发一个电子书阅读页面

使用epubjs开发一个电子书阅读页面相关推荐

最新文章

热门文章