im trying to create a simple html that will use epub.js to show a book. cause later i want to use it in my react native app.
tried to load local file and fil from url . both didnt work
epub.js: https://github.com/futurepress/epub.js
what am i missing ? why isnt the book loading ?
here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/epubjs/dist/epub.min.js"></script>
<style>
body {
margin: 0;
}
#reader {
height: 400px;
width: 400px;
overflow: hidden !important;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="reader" style="background-color: antiquewhite; width: 400px; height: 400px"></div>
</body>
<script>
try {
//let bookUrl = 'https://filesamples.com/samples/ebook/epub/Sway.epub'
let bookUrl = './Sway.epub'
let epubReader = ePub(bookUrl);
//works
var request = new XMLHttpRequest();
request.open('GET', bookUrl, true);
request.onreadystatechange = function() {
if (request.readyState === 4) {
if (request.status === 404) {
alert("Oh no, it does not exist!");
} else {
alert("book exists!!!!"); //this is fired!!!
}
}
};
request.send();
var book = ePub(bookUrl);
var rendition = book.renderTo("reader", {
width: 400,
height: 400
});
var displayed = rendition.display();
} catch (e) {
alert('error 1' + e)
}
</script>
</html>