4

Anyone using epub.js or able to understand that so-called" documentation here https://github.com/futurepress/epub.js?

What is wrong with my code? I've followed step by step the documentation... What am I missing?

<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
            <script src="../dist/epub.min.js"></script>
<script>
  var book = ePub("my_epub.epub");
  var rendition = book.renderTo("area", { method: "default", width: "100%", height: "100%" });
  var displayed = rendition.display();
</script>


<div id="area"></div>

<body>

Thank you for your time.

  • Install epubjs npm by command: `npm i epubjs`. Then structure code same as follow link: https://stackoverflow.com/questions/52327839/how-to-check-if-a-selected-string-contains-a-substring-of-an-highlight-in-epubjs – protoproto Sep 16 '18 at 11:34

7 Answers7

1

This may be too late to be helpful to you, but I hope it will be helpful to others.

First, in my short experience with epub.js I have wrestled with the same question, and eventually learned that if you want to set the height and width options to "100%", as suggested in the "Getting Started" guide on the README you reference, and as you use in your example, the element you are rendering to must have a fixed height. In your case, the #area div. Try experimenting with setting the CSS for #area to height: 500px;, and seeing if the epub then renders.

This is somewhat more informative epub.js documentation, but not really about set-up: http://epubjs.org/documentation/0.3/#rendition

Second, this may not be the issue for you at all, I know the README instructs referencing <script src="../dist/epub.min.js"></script> exactly as you have it, but for my purposes in a Rails 5.1 application with Webpack, that did not work.

Instead I added it to the project with Yarn (yarn add epubjs, or npm install epubjs if you use npm), and then imported it into the relevant file (in my case a Vue component) with import ePub from 'epubjs'.

You can check if you have epub.js loaded by console logging your book or rendition variables after you define them (console.log(book) or console.log(rendition), in your example). If they are objects chock-full of fancy functions unfamiliar to you, you'll know you've got epub.js on the page, and the issue is more likely the height/width values.

ctrutmann
  • 31
  • 5
1

your html uses epub.js demo exactly... but you didn't consider that it's extremely likely that epub.js isn't where you asked for it from.

Assume your html is at

http://example.com/epubstuff/see-ebook.html

if so, then you need to upload the epub.js script to //example.com/dist/epub.js so that ../dist/epub.js finds the js file so it can render.

Once you've done that, you get to enter the fun world of trying to predict what epub.js will do with the css that defines "area". It's extremely tricky to get it to render properly in "less than the full screen." although it CAN be done.

Rick Boatright
  • 31
  • 3
1
Add the following in metro.config.js

const blacklist = require('metro-config/src/defaults/blacklist');

module.exports = {
    resolver: {
        blacklistRE: blacklist([
            /node_modules\/.*\/node_modules\/react-native\/.*/,
        ])
    },
};
Raj.S
  • 81
  • 1
  • 2
  • 9
1

I had the same problem following the FuturePress instructions.

First, '../dist/epub.js' assumes you have this directory and file on your server. I expect that you don't since it is not working.

Second, I was able to get my self-hosted epubs to work only if I ran the HTML file from the same server my epub is hosted on. Not sure why I couldn't get the epub to load if it was hosted on another server (maybe something else I missed). In any case, my HTML and EPUB files were hosted something like:

  • example.com/book.html
  • example.com/libary/my-epub.epub

Try these changes (the JS file references and the epub file reference) to your code and see if it works (this worked for me):

<body>

<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>
<script>
  var book = ePub("http://www.example.com/libary/my-epub.epub");
  var rendition = book.renderTo("area", { method: "default", width: "100%", height: "100%" });
  var displayed = rendition.display();
</script>
    
<div id="area"></div>

</body>

Hope that makes sense.

EvanofMT
  • 11
  • 1
0

try to moved your library from tag body to tag head sir,

<!DOCTYPE html>
<html>
<head>
  <title>Input</title>

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

  <link rel="stylesheet" type="text/css" href="examples.css">

</head>
<body>
  <div id="title"><input type="file" id="input"></div>
  ...
  ...

  <script>
  var book = ePub();
  var rendition;
  var inputElement = document.getElementById("input");
  ...
  ...

  <script>
...
...
</body>
</html>

Hope this helps.

abu-ahmed al-khatiri
  • 189
  • 1
  • 14
0

OK, it's not that complicated. I had the same issue, and it turned out that the <div id="area"></div> should be placed before the last <script>...</script> tags. Otherwise it will report a null value exception in the render function.

So change the code to:

<body>
   <div id="area"></div>
<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
<script src="../dist/epub.min.js"></script>
<script>
  var book = ePub("my_epub.epub");
  var rendition = book.renderTo("area", { method: "default", width: "100%", height: "100%" });
  var displayed = rendition.display();
</script>

and it should work.

xdcsy
  • 113
  • 3
0

If you use epubjs library into angular then you have to do following things

  • First install the epubjs library by using below command npm i epubjs
  • Add the below line into your head tag of index.html
<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>
  • Add the epub.min.js into your dist folder
  • Add the file path of epub.min.js into your angular.json file like below
     "scripts": [
              "dist/epub.min.js"
            ]
  • Your html should look like this
    <!doctype html>
    <html lang="en">

    <head>
      <meta charset="utf-8">
      <title>NarratureApp</title>
      <base href="/">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">

      <!-- epub start -->
      <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>
      <!-- epub end -->

      <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    </head>

    <body class="mat-typography">

       <button type="button" class="btn btn-success btn-sm" onclick="myFunction()">Read now</button><br><br>

      <div id="frame">
        <div id="area"></div>
        <a id="prev" href="#prev" class="arrow">‹</a>
        <a id="next" href="#next" class="arrow">›</a>
      </div> 

      <script>
        function myFunction() {
          var book = ePub("https://s3.amazonaws.com/moby-dick/moby-dick.epub");
          var rendition = book.renderTo("area", {
        width: "100%",
        height: 600,
          });

          var displayed = rendition.display();

          // Navigation loaded
          book.loaded.navigation.then(function (toc) {
        console.log(toc);
          });

          var next = document.getElementById("next");
          next.addEventListener("click", function () {
        rendition.next();
          }, false);

          var prev = document.getElementById("prev");
          prev.addEventListener("click", function () {
        rendition.prev();
          }, false);
        }
      </script>

      <app-root></app-root>
    </body>

    </html>
Pranali Pawar
  • 9
  • 4