CODEWITHSUNDEEP
javascriptnode.js
user16751857
user16751857

Reputation:

JavaScript Content Not Loading On Page (epub.js)

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.

Upvotes: 1

Views: 706

Answers (2)

Polymath
Polymath

Reputation: 862

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>

Having this line above the epub.min.js line solved the problem for me.

Upvotes: 0

Apoorva Chikara
Apoorva Chikara

Reputation: 8773

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.

Upvotes: 1

Related Questions