vue + epub.js 电子书
最近在写一个电子书的功能,从2016年写到了2017年,如今总算告一段落,下面总结一下途中遇到的问题吧.
1. 前期准备
a) Epub.js
GitHub: https://github.com/futurepress/epub.js
b) Epub格式电子书
在线电子书格式转换: http://www.online-convert.com/
2. 正式开始
方式一: 使用epub文件
a) 引入epub.js和jszip.js(html)
<script src="./lib/epub.min.js"></script><script src="./lib/jszip.min.js"></script>
b) 配置电子书(js)
this.book = window.ePub(`/ebooks/advanture.epub`, { restore: true
})
this.book.renderTo(this.$els.ebook)
c) 添加翻页动作
/** * 跳转到上一页
*/
goToPrePage () {
this.book.prevPage()
},
/**
* 跳转到下一页
*/
goToNextPage () {
this.book.nextPage()
},
方式二: 使用解压的epub文件夹
a) 引入epub.js(html)
<script src="./lib/epub.min.js"></script>
b) 配置电子书(js)
this.book = window.ePub(`/ebooks/advanture/`, { restore: true})
this.book.renderTo(this.$els.ebook)
3. 遇到的问题
a) 跳转到指定章节
/**
* 返回chapterId对应的文件名
*/
getHref (chapterId) {
let idString = chapterId + ''
let re = new RegExp(`\\d{${idString.length}}\\.`)
let href = this.book.currentChapter.href || 'index_split_000.html'
return href.replace(re, idString + '.')
},
goToChapter (chapter) {
this.book.goto(this.getHref(chapter.chapterId))
}
b) 限制可读的章节
data ()
return {
chapterPageNum: 0
}
},
/**
* 添加 章节渲染 监听
*/
addChapterDisplayedListener () {
this.book.on('renderer:chapterDisplayed', this.onChapterDisplayed.bind(this))
},
/**
* 章节渲染 回调
*/
onChapterDisplayed (chapter) {
this.spinePos = chapter.spinePos
if (parseInt(this.bookId) === 1 && chapter.spinePos === this.book1AvailableChapterNum - 1) {
this.chapterPageNum = 1
}
},
/**
* 跳转到上一页
*/
goToPrePage () {
if (this.spinePos === this.bookAvailableChapterNum - 1) {
this.chapterPageNum -= 1
}
this.book.prevPage()
},
/**
* 跳转到下一页
*/
goToNextPage () {
if (this.spinePos === this.bookAvailableChapterNum - 1) {
if (this.chapterPageNum >= this.book.currentChapter.pages) {
this.showToast('精彩内容,敬请期待~')
} else {
this.chapterPageNum += 1
this.book.nextPage()
}
} else {
this.book.nextPage()
}
},
c) 手机上电子书宽度超出屏幕
const width = 300
const height = 500
this.book = window.ePub(`/ebooks/advanture/`, {
restore: true,
width: width,
height: height
})this.book.setStyle('width', `${width}px`)
this.book.setStyle('height', `${height}px`)
d)ios翻页时整个html滑动
转载于:https://www.cnblogs.com/jun3101s/p/6423438.html
vue + epub.js 电子书相关推荐
- vue epub.js使用touchstart事件没有反应
在github找到了答案,删除method:default
- EPUB.js 解决图片裁剪问题(缩放问题)
在EPUB.js中,如果需要实现自动缩放,通过添加smartimages.js就可以实现图片自动缩放了,经过研究smartimages.js,发现,他可以是实现图片的缩放,但只能实现图片比需要显示的空 ...
- 记ePub.js使用过程中的那些事
在尝试开发web阅读器时因为需要解决epub电子书格式的解析,我选择了ePub.js(其实也没别的库可以选择) 首先是关于ePub.js使用时的一些坑 1.这个库可以解析解压好的文件和压缩过的epub ...
- vue引用js文件的多种方式
本文主要介绍了vue引用js文件的多种方式,本文大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 1.vue-cli webpack全局引入jquery (1) 首先 npm inst ...
- vue cli3.3 以上版本配置vue.config.js
// vue.config.js 配置说明 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions // 这 ...
- vue.config.js配置
原作者项目地址:https://github.com/staven630/vue-cli3-config const path = require("path"); const w ...
- vue.config.js多页配置
vue.config.js多页配置,具体看代码: "use strict"; const path = require("path"); var webpack ...
- vue-cli3中的vue.config.js配置
vue-cli3中的vue.config.js配置 我的跨域是配置通过chrome浏览器的跨域设置,前端修改跨域问题,以此解决跨域的,故没有配置代理: const path = require('pa ...
- Vue.js CLI4 Vue.config.js标准配置 (最全注释)
前言: Vue.js CLI工具 不知不觉发展到了4.0时代,CLI给人最直白的感受是没有了build文件夹跟config文件夹,所有的配置都在Vue.config.js完成.那么该文件的配置至关重要 ...
最新文章
- 2008php多版本共存,lnmp安装多版本PHP共存的方法详解
- scrum工具leangoo缺陷管理看板示例
- 性能测试培训:定位jvm耗时函数
- 定时器--STM32f4--HAL
- [文档]. Xilinx - 编写有效的Testbenches
- vue 插件 滑块验证_Vue插件之滑动验证码
- 传感器阵列波束优化设计与应用_传感器阵列波束优化设计与应用.pdf——马远良...
- Spring Boot Actuator 监控和管理应用程序
- 交换机的VLAN技术
- docker php gd扩展,docker安装php扩展gd库
- VM虚拟机设置桥接模式
- unity animator动画融合时的上下半身速度分离控制
- proftpd ldap mysql_安装proftpd+ldap报错
- 使用Vue实现todos(Vue CLI和VueX)
- wifi系列------初始化
- rhel7 pcs pacemaker corosync配置主从高可用
- windriver下pcmcia驱动程序编写的疑问
- c语言1h什么意思,标准现代精确——1C开叫1H应叫及其他应叫
- 电脑怎么录屏及支持带声音视频及软件免费下载安装
- 自动驾驶数据服务进入2.0时代