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 */
}
