使用Epub.js打开本地Epub文件

1. 导入epubjs：下载地址：https://github.com/futurepress/epub.js/
2. 辅助工具jszip：是一个用于创建、读取和编辑.zip文件的JavaScript库
3. controller获取资源在服务器上的地址，并跳转到jsp页面打开epub文件
3. jsp中简单js操作，进行简单的epub阅读
4. 相关CSS配置

1. 导入epubjs：下载地址：https://github.com/futurepress/epub.js/

2. 辅助工具jszip：是一个用于创建、读取和编辑.zip文件的JavaScript库

3. controller获取资源在服务器上的地址，并跳转到jsp页面打开epub文件

 @RequestMapping(value = "/epubReader")public ModelAndView epubReader(HttpServletRequest request, BasicBook searchInfo) {ModelAndView view = new ModelAndView("warehouse/publ/version3/epubReader");BasicBook book = bookService.getBookDetail(searchInfo);if (book != null && !StringUtil.isEmpty(book.getAttachment())) {view.addObject("bookName", book.getAttachment());} else {view.addObject("bookName", "moby-dick.epub");}StringBuffer requestPath = request.getRequestURL();String location = requestPath.delete(requestPath.length() - request.getRequestURI().length(), requestPath.length()).append("/").toString();view.addObject("location", location);return view;}

3. jsp中简单js操作，进行简单的epub阅读

<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>在线阅读</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="/js/epubjs/libs/jszip/jszip.min.js"></script>
<script type="text/javascript" src="/js/epubjs/dist/epub.js"></script>
<link rel="stylesheet" type="text/css" href="/js/epubjs/examples/examples.css" />
<link rel="stylesheet" type="text/css" href="/style/version3/epubReader.css" />
</head>
<body><!-- 左侧章节选择 --><div class="chapter"><div class="chapter_station"><div class="animate">目录导航</div><ul id="catalog" class="animate"></ul></div><div class="chapter_content"><div id="viewer" class="scrolled"></div><div class="navlink"><a id="prev" href="#prev" style="float: left;">... </a><a id="next" href="#next" style="float: right;">...</a></div></div></div><script>var book = ePub("服务器上文件地址");var rendition = book.renderTo("viewer", {flow : "scrolled-doc",width : "100%"});// 导航book.loaded.navigation.then(function(toc) {var $ul = document.getElementById("catalog");var docfrag = document.createDocumentFragment();toc.forEach(function(chapter) {var li = document.createElement("li");li.textContent = chapter.label;li.setAttribute("ref", chapter.href);li.classList.add('animate');li.onclick = function() {rendition.display(li.getAttribute("ref"));}docfrag.appendChild(li);});$ul.appendChild(docfrag);});// 打开页rendition.display(1);// 设置主题rendition.themes.register("tan", "/js/epubjs/examples/themes.css");rendition.themes.select("tan");var next = document.getElementById("next");next.addEventListener("click", function(e) {rendition.next();e.preventDefault();}, false);var prev = document.getElementById("prev");prev.addEventListener("click", function(e) {rendition.prev();e.preventDefault();}, false);rendition.on("rendered", function(section) {var nextSection = section.next();var prevSection = section.prev();// 下一页if (nextSection) {nextNav = book.navigation.get(nextSection.href);if (nextNav) {nextLabel = nextNav.label;} else {nextLabel = "next";}next.textContent = nextLabel + " »";} else {next.textContent = "";}// 上一页if (prevSection) {prevNav = book.navigation.get(prevSection.href);if (prevNav) {prevLabel = prevNav.label;} else {prevLabel = "previous";}prev.textContent = "« " + prevLabel;} else {prev.textContent = "";}});// 目录初始化rendition.on("rendered", function(section) {var current = book.navigation && book.navigation.get(section.href);if (current) {var $ul = document.getElementById("catalog");var $lis = $ul.querySelectorAll("li");for (var i = 0; i < $lis.length; ++i) {let active = $lis[i].getAttribute("ref") === current.href;if (active) {$lis[i].classList.add('active');} else {$lis[i].classList.remove('active');}}}});window.addEventListener("unload", function() {this.book.destroy();});</script><script type="text/javascript" src="/js/jquery-1.7.1.js"></script><script type="text/javascript">$(document).ready(function() {if (window.innerWidth < ($(".chapter_station").width() + $(".chapter_content").width())) {$(".chapter_station").hide();$("#viewer.scrolled").css("width", (window.innerWidth - 100) + "px");} else {$(".chapter").css("width", ($(".chapter_station").width() + $(".chapter_content").width() + 300) + "px");}})</script>
</body>
</html>

4. 相关CSS配置

@charset "UTF-8";* {padding: 0;margin: 0;text-align: center;font-family: 'Lato', sans-serif;box-sizing: border-box;font-family: 'Lato', sans-serif;
}.chapter {text-align: center;margin: 0 auto;
}.chapter_station {float: left;height: 100%;display: inline-block;margin-top: 40px;padding: 20px;box-shadow: 0 0 4px #ccc;background: white;margin-right: 80px;max-width: 300px;
}.navlink {}.navlink a {margin: 14px;display: block;text-align: center;text-decoration: none;color: #ccc;font-weight: bold;
}.chapter_content {float: left;min-width: 800px !important;margin: 20px;
}#viewer.scrolled {margin: 20px;
}.chapter_station ul li.avtive {background: #FF7F24;color: white;font-weight: bold;
}.chapter_station ul li:hover {background: #FF7F24;color: white;cursor: pointer;
}.chapter_station ul li {text-align: left;display: block;min-width: 200px;max-width: 400px;background: rgb(250, 243, 227);;padding: 15px 20px 20px 20px;
}.chapter_station div.animate {text-align: left;min-width: 200px;max-width: 400px;border-radius: 0 5px 0 0;position: relative;z-index: 2;font-weight: bold;display: block;background: rgb(250, 243, 227);;padding: 15px 20px;border-radius: 0 5px 0 0;
}.animate {-webkit-transition: all .3s;-moz-transition: all .3s;-ms-transition: all .3s;-ms-transition: all .3s;transition: all .3s;backface-visibility: hidden;-webkit-backface-visibility: hidden; /* Chrome and Safari */-moz-backface-visibility: hidden; /* Firefox */-ms-backface-visibility: hidden; /* Internet Explorer */
}

使用Epub.js打开本地Epub文件相关推荐

html调用点击运行本地py文件,实现HTML调用打开本地软件文件
有时候我们想要实现一个功能,就是在HTML页面点击一个链接就能调用打开本地可执行文件.就像腾讯QQ.迅雷这种. 而实现这种功能其实也很简单,就是需要我们添加修改注册表,实现自定义URL Protoco ...
python stl文件_打开本地STL文件并创建webgl使用的geometry
需求打开本地STL文件一个独立基于webgl的viewer,会被别的网站重用将打开文件的数据传输给viewer,并且在文件加载的时候显示进度条解决方案 #1可以使用传统的html5 api来打 ...
java 安卓 html文件怎么打开方式_android 浏览器打开本地html文件的方法
android 浏览器打开本地html文件的方法有些html文件放在本地磁盘和sdcard,如何用打开这个网页呢? 这种应用在测试时非常有用. 有2个方法: 1. 使用文件管理器如ES等,需要幸运 ...
Geotools之“Hello World”——打开本地shp文件并显示
概述:从本节开始,博文中会陆陆续续更新一些有关geotools相关的文章.本节讲述的是geotools的开胃菜,打开本地shp文件,并在窗口中显示. 引言:geotools简介. Geotools是J ...
Vue.js读取本地json文件并分页显示
Vue.js读取本地json文件并分页显示 1.功能实现通过axios异步加载技术读取本地的json文件内容,并通过vue.js处理数据在h5页面分页显示(这里以3行数据分页) 2.student. ...
android 浏览器打开本地html文件的方法
android 浏览器打开本地html文件的方法有些html文件放在本地磁盘和sdcard,如何用打开这个网页呢? 这种应用在测试时非常有用. 有2个方法: 1. 使用文件管理器如ES等,需要幸 ...
htm文件在C语言中如何打开,如何在Microsoft Edge浏览器中打开本地HTML文件？
自远古以来,如果您运行Web浏览器可执行文件,大多数Web浏览器都能打开本地文件,例如只需执行iexplore.exe file:/c:/temp/file或通过IShellDocView接口.我试图 ...
JS读取本地CSV文件数据
JS读取本地CSV文件数据文件中的部分数据如图需求是需要提取出文件的数据使用到的模块是 Papa Parse 1. 依赖安装 yarn add papaparse papaparse的基本使用可 ...
JS 打开本地程序及文件
在网页打开本地应用程序示例: 一.在本地注册表自定义协议:以自定义调用Viso为例 1.在HKEY_CLASSES_ROOT下添加项ZVISIO. 2.修改ZVISIO项下的"(默认)&qu ...

使用Epub.js打开本地Epub文件

使用Epub.js打开本地Epub文件

1. 导入epubjs：下载地址：https://github.com/futurepress/epub.js/

2. 辅助工具jszip：是一个用于创建、读取和编辑.zip文件的JavaScript库

3. controller获取资源在服务器上的地址，并跳转到jsp页面打开epub文件

3. jsp中简单js操作，进行简单的epub阅读

4. 相关CSS配置

使用Epub.js打开本地Epub文件相关推荐

最新文章

热门文章