0

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>
jabaa
  • 5,844
  • 3
  • 9
  • 30
eyal gromzin
  • 155
  • 2
  • 11
  • 1
    You should check for success `request.status !== 200`. `404` is only one error code. There are many others. With `request.status !== 200` I get the alert `Oh no, it does not exist!`. – jabaa Mar 26 '22 at 10:51
  • 1
    Here is a working example: https://jsfiddle.net/zdkm14cf/ It seems like stack snippets block something necessary to load the epub. – jabaa Mar 26 '22 at 11:06
  • @jabaa is it possible to show epub with a local file ? – eyal gromzin Mar 27 '22 at 12:04
  • Do you mean a file on the clients computer? Otherwise it's not a local file. You can't read local files using URLs in a browser for obvious security reasons. The only way to read local files is a file input element where the user selects a file. – jabaa Mar 27 '22 at 12:06
  • @jabaa even if i have a file uri? file:///... ? – eyal gromzin Mar 27 '22 at 12:20
  • In that case you need to open the whole website with file:// and that limits the functionality. Many libraries don't work with file://. – jabaa Mar 27 '22 at 12:22

0 Answers0