当前位置: 首页 > 工具软件 > Floatlabel.js > 使用案例 >

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

太叔鸿博
2023-12-01

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 */
}
 类似资料: