使用 Vue 和 epub.js 制作电子书阅读器

ePub 简介

ePub 是一种电子书的标准格式,平时我看的电子书大部分是这种格式。在手机上我一般用“多看”阅读 ePub 电子书,在 Windows 上找不到用起来比较顺心的软件,所以很久之前就想折腾一下,自己开发一个 ePub 电子书阅读器。这两天趁着有空,做了一个简单的阅读器。虽然还有些 bug,但基本功能算是齐全了。自己开发的有很多好处,以后只要稍微修改一下,就可以实现导出 HTML 或者 导出 Markdown 的功能,方便保存读书笔记,这一点比大多数软件好用多了。

epub.js 简介

ePub 作为一种标准格式,自然而然地会有很多开源的实现。基于 Javascript 的库不多,epub.js 算是做得最好的了。使用起来比较简单,官方的示例和第三方例子也比较丰富,有兴趣的自己去看,这里不多说。

indexedDB

第一次在项目中使用 indexedDB,之前一直用 localStorage 作为存储方案。之所以用 indexedDB,是因为 localStorage 只有 5M 的存储空间,只能选择 indexedDB。

本想用 Promise 封装 indexedDB 的,奈何能力不够,没有成功。感觉 indexedDB 兼容性还是不怎么样,浪费了半天的时间在调试上面,还是没成功,结果升级一下浏览器就解决了,也是醉了。项目快做好的时候发现了一个封装库 localForage,感觉还不错,可以避免少采坑,在这里推荐一下。

项目介绍

epub-front 是一个 Web 版的 ePub 电子书阅读器,使用 Vue、epub.js、indexedDB 和 rangy 开发。

你可以点击这里 使用该阅读器来阅读 ePub 电子书。

近期可能会增加一些功能、比如导出 Markdown、编辑 ePub 什么的,看心情。

欢迎 star、PR。

原文地址:https://www.cnblogs.com/yunser/p/use-vue-and-epubjs-make-a-reader.html

时间: 2024-10-24 10:51:06

使用 Vue 和 epub.js 制作电子书阅读器的相关文章

Rem是什么,牛逼的Vue,Epub竟然可以实现阅读器功能。太牛了。

rem 相当于根元素font-size值的倍数. 1rem=根元素font-size 2rem=根元素font-size * 2 // 1rem = fontSize px // 1px = (1/fontSize) rem $fontSize:37.5; @function px2rem($px) { @return (@px / $fontSize) + rem; } div,div,div布局.div,span.加上class,id布局.wrapper. 加背景色,进行调试看效果. fle

[ASP.Net]用RssToolKit2.0解析RSS,制作RSS阅读器

在Python要读取RSS可以使用FeedParser.那么在ASP.net里面呢?难道我们要自己发出request去取得XML,并且自己用XmlReader去解析XML里面的DOM对象吗? 当然不用这么麻烦啰. 在ASP.net里面,我们可以使用RssToolkit 2.0,这是一个开放源代码(Open Source)的RSS处理函数库.里面提供了很完善的RSS处理函数.你可以自己烧制RSS feed,也可以透过它去解析RSS. HI!我是finalevil,这是我的分站, 欢迎您订阅我的RS

电子书阅读器安卓版推荐 PDF阅读器也可轻松编辑文档了

在电子书的各种格式中,你最青睐哪种呢?是mobi.txt.还是PDF,相信很多人和小编一样喜欢阅读 PDF格式的电子书,这时候选择一款合适的PDF阅读器就十分重要了.那么,电子书阅读软件哪个好呢? 在回答这个问题之前,我们先考虑这样一个问题,我们需要一款什么样的PDF阅读器?是只满足基本的阅读功能就可以了么?想必很多人都不满足于这吧.小编今天推荐的这款轻快PDF阅读器的功能就十分齐全,不信且往下看: 一.我们需要什么样的阅读功能? 1.自动添加手机内的PDF文件:这点应该没什么意见吧,毕竟很多人

电子书及阅读器Demo

电子书阅读器(Kindle,电子纸技术.LCD.电子墨水技术等: 亚马逊/当当网站)  电子书产业可分5大环节:内容供应商.数字格式制作商.内容流通服务平台.传输平台以及终端阅读器产品. 全球电子书市场上,亚马逊占据第一位置,紧随其后的是索尼,而中国电子书领先企业汉王科技位居第三.在中国,汉王已经占据了该领域核心地位. - 硬件 + 软件 + 内容(书籍,纸质书电子书) 电子书的主要格式有PDF.TXT.EXE.CHM.UMD.PDG.JAR.PDB.BRM.EPUB.HLP.HTML.LIT.

Linux版EPUB阅读器

Linux版EPUB阅读器 本文导航 -1. Calibre09% -2. FBReader23% -3. Cool Reader33% -4. Okular44% -5. pPub51% -6. epub63% -7. Sigil74% 如果说用平板电脑看书尚属主流的话,那么在电脑上读书就非常少见了.专注阅读16世纪的书是非常困难的了,没人希望后台蹦出QQ聊天窗口.但是如果你非要在电脑上打开电子书的话,那么你需要一个电子书阅读软件.大多数出版物支持使用EPUB格式的电子书(电子出版物).幸运的

C#版简易RSS阅读器

C#版简易RSS阅读器.由VB版修改完成,感谢aowind的技术支持! 源代码: using System; using System.Drawing; using System.Collections; using System.ComponentModel; using System.Windows.Forms; using System.Data; using System.Xml; using System.IO; using System.Threading; namespace Yu

自定义样式,使用浏览器阅读epub格式的电子书

epub格式的电子式一般用专门的阅读器打开,但是如果可以使用浏览器打开,就可以随意更改css了,获得极致的体验效果. 比如可以自定义字体.行间距.背景色.字体大小.缩进等等... 当然,如果您不需要添加翻页按钮,请跳过第二.三步,直接进行第四步也可以. 效果如下: 一.使用解压软件将epub格式的电子书解压到特定的文件夹,解压后一般为html格式. 二.将文件重命名,以数字方式命名,并从1开始编号,可以使用bat批处理文档,去除重命名后的括号,只留下数字,方面下一步翻页时计算页面. 1.首先把文

【epub.js|翻译|原创】开源中间件epub.js的使用及其中文文档

小组项目 "基于JavaScript的读书平台" 正在开发中,预计年底上线. 由于之前有Flask框架的web开发经验,产品的第一个版本我负责了web平台搭建,技术选型: 服务器端:nodejs-express 前端:React.Ant Design 数据库:Mysql 之前Flask框架下的前端技术使用的是基础的HTML+CSS,和一小部分JQuery效果,因为一直对前端比较感兴趣,这次大胆的用上学的不那么扎实(或者说更流行)的React,实践指导理论. "读书平台&quo

Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏

Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏 转载 来源:jrainlau 链接:https://segmentfault.com/a/1190000005804860 项目地址:https://github.com/jrainlau/draw-something 下载 & 运行 git clone [email protected]:jrainlau/draw-something.git cd draw-something && npm install