Use http urls to load book instead of files from assets/book/

[Nipun04]

How can we use httpmodules to get books from urls ?

[janpio]

As far as I remember EPub wants a local file path. So you can either download the file and provide that path, or look if there is a way to include a remote file.

Will check later.

[janpio]

On a computer now.

Epub right now gets a file path: https://github.com/janpio/ionic-epubjs/blob/master/src/pages/book/book.ts#L34 https://github.com/janpio/ionic-epubjs/blob/master/src/pages/home/home.ts#L19-L34

If you are using this project as a mobile app, you could download a file and then write it to disk using e.g. https://ionicframework.com/docs/native/file/

Looking at the network panel of http://futurepress.github.io/epub.js/examples/contained.html it shows it is using XHR to download the .epub. That might very well mean you can also specify a remote URL to be downloaded. Best test that yourself, or post an issue at https://github.com/futurepress/epub.js/issues to ask there.

[Nipun04]

Thanks, Let me try this out

[Nipun04]

I've tried everything but i'm unable to solve it.

I want to simply use such URLs ( http://maheshsinghsawant.scienceontheweb.net/moby-dick.epub ) to open epub file

@janpio Brother can you please help me out

[janpio]

What did you try?

How should it work - in a native Ionic app (iOS, Android) or also in a webapp/PWA?

[Nipun04]

It should work in a webapp/PWA 1) First i tried the solution posted on https://github.com/futurepress/epub.js/issues ( when these didn't work) 2) Then i stored files on firebase n used

this. book = epub(storageRef.child('/child').getDownloadURL().then(function(url) {
  // `url` is the download URL for the epub

  var xhr = new XMLHttpRequest();
  xhr.responseType = 'blob';
  xhr.onload = function(event) {
    var blob = xhr.response;
  };
  xhr.open('GET', url);
  xhr.send();

}).catch(function(error) {

}));

[Nipun04]

@janpio : any solutions ?

[janpio]

I didn't have time to look into this, also have no experience with Firebase.

Have you tried downloading the epub file locally?

You might want to try to post at forum.ionicframework.com

[janpio]

So I looked into this a bit:

1. When developing locally with ionic serve it does not work because of CORS issues (missing header) for the book file:

   Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at .... (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

2. When developing locally with ionic serve, this works perfectly fine with a Ionic CLI service proxy.
3. When developing locally with ionic serve, this works perfectly fine if the server returns e.g. a Access-Control-Allow-Origin: * header.
4. When building for a native device with ionic cordova run, this works totally fine with the plain URL (no matter what headers it returns).

The last option also works perfectly for a PWA, see: https://janpio.github.io/ionic-epubjs/

[janpio]

Ifyou can not fix the headers of your file you can a) use a proxy script that gets the URL as a parameter, requests the file and sends it to the app with the correct header added or b) look into using XMLHttpRequest to download the file first, then give it to Epub.js somehow.

[Nipun04]

@janpio Thank you

Just checked https://janpio.github.io/ionic-epubjs/ ; works perfectly

[janpio]

This is the .htaccess file in the folder where the .epub lives:

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>