I'm trying to use epub.js library, and am trying to get the barebones running. The problem is the ebook is not displaying in my browser:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/epubjs/dist/epub.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="area"></div>
</body>
<script>
var book = ePub("steinbeck-of-mice-and-men.epub", { openAs: "epub" });
var rendition = book.renderTo("area", {width: 600, height: 400});
var displayed = rendition.display();
book.renderTo("area", { method: "default", width: "100%", height: "100%" });
</script>
</html>
I have the steinbeck-of-mice-and-men.epub in my directory, but it's just a blank page.
It seems your path is incorrect. Use the correct path if the file is in the same directory where you are keeping the HTML.
<script>
var book = ePub("./steinbeck-of-mice-and-men.epub", { openAs: "epub" });
var rendition = book.renderTo("area", {width: 600, height: 400});
var displayed = rendition.display();
// book.renderTo("area", { method: "default", width: "100%", height: "100%" }); // why are you rendering it again?
</script>
You can check the documentation here.