尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

3分钟跑起一个 EPUB 阅读器:epubjs-reader 入门

3分钟跑起一个 EPUB 阅读器:epubjs-reader 入门 3分钟跑起一个 EPUB 阅读器epubjs-reader 入门【免费下载链接】epubjs-readerEpub.js Reader项目地址: https://gitcode.com/gh_mirrors/ep/epubjs-reader你想在网站上展示 EPUB 电子书自己写切章、翻页、字号、目录逻辑太费劲。epubjs-reader 是基于 EPUB.js 库做出来的完整网页 EPUB 阅读器clone 下来就能跑带目录、书签、阅读位置恢复的阅读界面直接给你。 能力速览它自带什么点左右箭头或按键盘翻页支持一键全屏侧边栏目录点击章节直接跳转书签和笔记笔记可以锚定到具体文字全书搜索、高亮批注以插件形式提供阅读位置和设置存在浏览器里下次打开自动恢复⚡ 三步跑起来git clone https://gitcode.com/gh_mirrors/ep/epubjs-reader cd epubjs-reader npm install npm start终端会提示端口号默认从 8080 开始被占用就自动找下一个浏览器访问http://localhost:8080/示例书《白鲸》直接读起来。默认书写在 reader/index.html 里换书有两个办法URL 传参地址后拼?bookPath比如http://localhost:8080/?bookPathhttps://s3.amazonaws.com/epubjs/books/alice.epub就是《爱丽丝梦游仙境》改代码ePubReader(书地址, { restore: true })restore表示下次访问时恢复阅读位置想嵌进自己的页面把reader/css和reader/js两个目录拷进你的项目页面里按顺序引入jquery.min.js、epub.js、reader.js三个脚本放一个div idviewer容器再调用ePubReader(books/book.epub, { restore: true })阅读区就出来了。顶栏的书签、设置、全屏按钮都是现成的不用另做 UI。这是复用样例最快的路径别自己重造轮子。动手改东西都在哪项目结构很简单看两个目录就够src/controllers/7 个控制器各管一块 UI目录、书签、笔记、设置想改交互从这里入手src/plugins/全书搜索和高亮批注扩展可以单独挑走改了 src 记得跑grunt watch重新构建页面加载的是reader/js里的编译产物⚠️ 你可能踩的坑本地 EPUB 打不开浏览器有 CORS 限制file://直接读会被拦。把书放到静态服务器上传 URL 即可改了代码页面没变你改的是 src页面加载的是 reader/js记得重新构建阅读位置丢了进度存在浏览器本地localforage换浏览器或清数据就没了。要跨设备同步得自己接后端想快速搞一个网页里的 EPUB 阅读页面抄这份样例、换个书地址就行。【免费下载链接】epubjs-readerEpub.js Reader项目地址: https://gitcode.com/gh_mirrors/ep/epubjs-reader创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表