我正在尝试让epub / ebook显示在html页面上，并能够存储用户在他们停止时的进度。
目前，我可以存储他们使用左/右按钮导航时所处的位置。我可以看到这显示在本地存储中。
然而，不管我怎么设置这本书来显示这个位置，似乎都失败了。我对javascript不够熟练，不明白它哪里出错了，为什么出错。我用chatgpt来构建很多这样的东西，并一直在筛选它，因为它的一些信息已经过时了。
目前，如果我试图设置图书的位置，在一个epub文件中，它会转到第一页，在另一个文件中，它会转到我认为是最后一页，然后导航中断;我不确定，因为我还没有真正翻阅所有的方式通过另一个。
无论如何，希望这里有人知道一个简单的窍门，对不起，我对这个库相对不了解。我试着看它的文档，坦率地说，它太大了，有太多的单独组件，我无法理解;我真的试过好几次了，我觉得卡住了。
我失败的部分是函数“setBookToSavedState（）”。
我也尝试过设置位置，在文档中我可以看到book.locations.currentLocation和rendition.currentLocation允许您获得或设置它，但似乎没有发生什么，当我这样做。
我将尝试运行某种循环，在那里我调用rendition.next，直到我得到开始位置，在我想要的地方排队，但这将是一些非常无知的代码，我希望在这里得到正确的方式，因为我不确定我是否能够得到它的工作。
提前感谢您提供的任何帮助！
<html>
<head>
<script src="https://futurepress.github.io/epubjs-reader/js/epub.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
<style>
#prev {
left: 0;
}
#next {
right: 0;
}
.arrow {
position: fixed;
top: 50%;
margin-top: -32px;
font-size: 64px;
color: #E2E2E2;
font-family: arial, sans-serif;
font-weight: bold;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<a id="prev" href="#prev" class="arrow" style="visibility: visible;"><</a>
<a id="next" href="#next" class="arrow" style="visibility: visible;">></a>
<div id="area">
</div>
<script>
// Load the opf
var book = ePub("moby-dick.epub");
var rendition = book.renderTo("area", {
width: "100%",
height: 600,
spread: "always"
});
rendition.display();
book.ready.then(() => {
var next = document.getElementById("next");
next.addEventListener("click", function(e){
book.package.metadata.direction === "rtl" ? rendition.prev() : rendition.next();
e.preventDefault();
saveViewerState();
})
}, false);
var prev = document.getElementById("prev");
prev.addEventListener("click", function(e){
book.package.metadata.direction === "rtl" ? rendition.next() : rendition.prev();
e.preventDefault();
saveViewerState();
}, false);
var keyListener = function(e){
// Left Key
if ((e.keyCode || e.which) == 37) {
book.package.metadata.direction === "rtl" ? rendition.next() : rendition.prev();
}
// Right Key
if ((e.keyCode || e.which) == 39) {
book.package.metadata.direction === "rtl" ? rendition.prev() : rendition.next();
}
};
rendition.on("keyup", keyListener);
document.addEventListener("keyup", keyListener, false);
function saveViewerState() {
if (rendition && rendition.location && rendition.location.start) {
// get the current location
var currentLocation = rendition.currentLocation();
// save the current location in localStorage
localStorage.setItem("currentLocation", JSON.stringify(currentLocation));
}
}
// Retrieve the saved state from local storage and set the book to the saved page
function setBookToSavedState() {
// get the saved location from localStorage
var savedLocation = JSON.parse(localStorage.getItem("currentLocation"));
// display the saved location
rendition.display(savedLocation);
}
</script>
</body>
</html>
1条答案
按热度按时间ars1skjm1#
Rendition.display的文档说明它需要
url或EpubCFI字符串。在您的示例中，您必须执行以下操作：