web电子书阅读器

通过vue+sass构建一个解析epub格式的电子书web阅读器
图标处理:iconmoon

1.文件目录:

src为代码文件夹;分为book主页,MenuBar菜单栏
TItleBar标题栏,index Vue的构建和入口文件,app。vue为测试文件,没什么用。

dist打包后的输出
asset图标和样式文件夹
static静态资源文件夹
2.样式基本配置:
viewport:



这里直接写在index.js里,防止缩放
rem,px配置:rem,em相对字体大小单位,但em相对于父元素的字体大小,rem相对于根元素的字体,所以带r吧,root。

px相对像素点单位,接着还有reset+global配置,这里可以直接网上找,目的是消除原生css的影响。
3.epub解析工作
引入epub.js(npm install -D epub)

引入epub文件(可在epubw.com下载)
代码引入const DOWNLOAD = "../static/2014_Book_Self-ReportedPopulationHealthA.epub";千万不可require或者import,否则会出现打包问题,webpack无法loader解析epub文件。
epub文件 epub.js渲染成book(this.book = new Epub(DOWNLOAD);)

book有个renderTo方法,输出Rendition,Rendition有个themes对象,控制样式和主题

设置样式

Book还有一个location属性,控制进度条this.book.locations。但epub文件刚加载,有延时,因此需要一个ready方法,调用异步promise以确保epub加载完毕。

this.bookAvailable作为epub渲染完成的标志。
this.navigation提供目录和跳转
翻页功能:

综上就可以实现翻页,进度控制,主题设置,字体设置,目录。

你可能感兴趣的:(web电子书阅读器)