epub.js的使用
epub.js的使用
npm安装
npm install epubjs
epub阅读器开发
ePub电子书解析和渲染
生成Book对象
this.book = new Epub(DOWNLOAD_URL)
通过Book.renderTo生成Rendition对象
this.rendition = this.book.renderTo('read', {
width: window.innerWidth,
height: window.innerHeight,
method: 'default'
})
通过Rendtion.display渲染电子书
this.rendition.display()
ePub电子书翻页
上一页
function prevPage() {
if (this.rendition) {
this.rendition.prev()
}
}
下一页
function nextPage() {
if (this.rendition) {
this.rendition.next()
}
}
ePub电子书的字号设置和场景切换
设置主题
function setTheme(index) {
this.themes.select(this.themeList[index].name)
this.defaultTheme = index
}
注册主题
function registerTheme() {
this.themeList.forEach(theme => {
this.themes.register(theme.name, theme.style)
})
}
设置字号大小
function setFontSize(fontSize) {
this.defaultFontSize = fontSize
if (this.themes) {
this.themes.fontSize(fontSize + 'px')
}
}
ePub电子书生成目录和定位信息
Book对象的钩子函数ready
this.book.ready.then(() => {
// 生成目录
this.navigation = this.book.navigation
// 生成Locations对象
return this.book.locations.generate()
}).then(result => {
// 保存locations对象
this.locations = this.book.locations
// 标记电子书为解析完毕状态
this.bookAvailable = true
})
ePub电子书通过百分比进行定位
function onProgressChange(progress) {
const percentage = progress / 100
const location = percentage > 0 ? this.locations.cfiFromPercentage(percentage) : 0
this.rendition.display(location)
}
HTML5 range控件
<input class="progress"
type="range"
max="100"
min="0"
step="1"
@change="onProgressChange($event.target.value)"
@input="onProgressInput($event.target.value)"
:value="progress"
:disabled="!bookAvailable"
ref="progress">
链接:https://www.jianshu.com/p/b923a50dbdc3
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
epub.js的使用的更多相关文章
- 【epub.js|翻译|原创】开源中间件epub.js的使用及其中文文档
epub是最流行的电子书规范之一,网络上对于Java Web有不少合适的方法来解析和呈现,但是关于epub.js的介绍比较少(尽管github上已经2K星了),更多的是概念性的内容,如: epub.j ...
- 使用 Vue 和 epub.js 制作电子书阅读器
ePub 简介 ePub 是一种电子书的标准格式,平时我看的电子书大部分是这种格式.在手机上我一般用"多看"阅读 ePub 电子书,在 Windows 上找不到用起来比较顺心的软件 ...
- [epub] epub.js的ePubReader函数报URI malformed错误的解决办法
报错信息:URI malformed 今天遇到了一个奇怪的问题折腾三个小时,最后发现是作者在底层使用了decodeURIComponent进行URL解码,而我在应用层使用了escape/unescap ...
- Rem是什么,牛逼的Vue,Epub竟然可以实现阅读器功能。太牛了。
rem 相当于根元素font-size值的倍数. 1rem=根元素font-size 2rem=根元素font-size * 2 // 1rem = fontSize px // 1px = (1/f ...
- (29)打鸡儿教你Vue.js
web阅读器开发 epub格式的解析原理 Vue.js+epub.js实现一个简单的阅读器 实现阅读器的基础功能 字号选择,背景颜色 有上一页,下一页的功能 设置字号,切换主题,进度按钮 电子书目录 ...
- 【epubcfi函数generateRangeFromCfi和generateCfiFromRange】两者的区别和适用性,以及另一种实现
epubcfi是描述epub规范电子书中文本位置的一种描述符,它是形如" epubcfi(/6/4[Section0017.xhtml]!4/42/178/1:0,4/42/198/1:1) ...
- 开发node桌面级应用工具:apk转化epub
随着苹果ibooks对国内的开放,最近接了个麻烦的需求: 把现有的APK转化支持苹果ibooks电子书的epub格式 apk,基本都知道就是安卓的应用程序 epub,是ibooks支持的电子书格式 ( ...
- [原创开源项目]EPUBBuilder一款在线的epub电子书编辑工具
epub 感觉自己么么哒, epub书:国外最流行的电子书格式: epub电子书介绍: epub全称为Electronic Publication的缩写,意为:电子出版, epub于2007年9月成为 ...
- epub电子书--目录结构介绍
epub电子书简介 epub全称为Electronic Publication的缩写,意为:电子出版, epub于2007年9月成为国际数位出版论坛(IDPF)的正式标准,以取代旧的开放Open eB ...
随机推荐
- 一条数据的HBase之旅,简明HBase入门教程4:集群角色
[摘要] 本文主要介绍HBase与HDFS的关系,一些关键进程角色,以及在部署上的建议 HBase与HDFS 我们都知道HBase的数据是存储于HDFS里面的,相信大家也都有这么的认知: HBase是 ...
- Magicodes.Sms短信库的封装和集成
简介 Magicodes.Sms是心莱团队封装的短信服务库,已提供Abp模块的封装. Nuget 新的包 名称 说明 Nuget Magicodes.Sms.Aliyun 阿里云短信库 Magicod ...
- 详细nginx配置SSL
1.nginx的ssl 让nginx实现用https来访问网站,http是80端口,https是443端口. https其实就是一种加密的http 2.为什么要加密 例子:在网上银行汇款,在你汇款的过 ...
- 如何运用DDD - 领域服务
目录 如何运用DDD - 领域服务 概述 什么是领域服务 从实际场景下手 更贴近现实 领域服务VS应用服务 扩展上面的需求 最常见的认证授权是领域服务吗 使用领域服务 不要过多的使用领域服务 不要将过 ...
- js 防抖、截流
突发奇想,在触发事件的时候,一些会频繁触发的事件会不会造成资源的浪费或者大量的计算造成页面卡顿,比如onresize,onscroll,onmousemove等事件. 然后就引出了一个新知识点:防抖. ...
- Cookie俩步操作实现n天免登陆
实现这个功能主要思路是:在登录成功的时候去给用户名和密码加上Cookie,将他们的值存在Cookie中,为了下次登录记住用户名和密码,然后在登录界面,获取所有的cookie,然后将值一一遍历出来.和用 ...
- Ubuntu 18.04 环境下 kubernetes v1.16.2 单机部署说明
一.安装环境 本次部署使用阿里云ECS 操作系统: Ubuntu 18.04 64位 实例规格: ecs.c6.large 2U4G 二.kubernetes 版本 k8s.gcr.io/kube- ...
- 2018HDU多校训练一 D Distinct Values
hiaki has an array of nn positive integers. You are told some facts about the array: for every two e ...
- protobuf 语法 与 protocol-buffers 的使用
前言 protocol-buffers 是 node.js 平台对支持 protobuf 封装的三方模块,下面的例子都通过 protocol-buffers 的使用来说明. 什么是protobuf G ...
- < JAVA - 大作业(2)仿qq即时通讯软件 >
< JAVA - 大作业(2)仿qq即时通讯软件 > 背景 JAVA上机大作业:设计一个仿qq即时通讯软件 任务简要叙述:设计一款仿QQ的个人用户即时通讯软件,能够实现注册,登陆,与好友聊 ...