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