What is the process for loading an ePub from internal storage using Ionic 4?

Struggling to load an epub from the internal storage device in Ionic4? Loading from assets works fine, but loading from internal storage is proving to be a challenge with errors. Looking for a solution to this issue.

this.book = ePub("assets/temp1.epub");
this.rendition = this.book.renderTo("area", {
  spread: "always"
});
this.rendition.display();

The above code displays properly when loading from assets.

const path = this.file.externalRootDirectory + 'ePub/temp1.epub';   
this.book = await ePub(path);   
      
this.rendition = this.book.renderTo("area", {
  spread: "always"
});
this.rendition.display();

However, it fails to display properly when attempting to load from internal storage.

typescriptcordovaionic4hybrid-mobile-appepub.js

Answer №1

To access this feature, simply utilize the sdcard file as an ArrayBuffer when calling the ePub() function.

this.file.readAsArrayBuffer(this.file.externalRootDirectory + '/appname/'+ '/', filename).then(arrayBuffer => {
        var book = ePub(arrayBuffer);
        var rendition = book.renderTo("area", { method: "default", width: "100%", height: "100%" });
      }).catch(err => { });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to verify the application's authenticity when making AJAX requests?

I have the below Code written in AngularJs, but I need to ensure that the authenticated app is sending requests to the backend. How can I achieve this? resp.get Update = function () { //return $http.get(urlBase); return $http({ ...

angularjsajaxcordovaauthentication

Encountering difficulties upgrading to Angular 8 as the necessary command cannot be located

Looking to enhance my ionic application, I embarked on the journey of upgrading. Initially, I attempted using ng update However, it was met with an error message saying bash: ng: command not found Determined to make progress, I then turned to np ...

angularionic-frameworkcommand-line-interfaceionic4

Having trouble getting JSON data to display in an Ionic HTML file

After successfully retrieving data from my API and logging it in the console, I am facing difficulties accessing it through my HTML file. Despite looking into other questions for a solution, I still couldn't figure out why it isn't working. Here ...

jsonangularionic4

Restrict or define the acceptable values for a key within an interface

In search of defining an interface that allows for specific range of values for the key. Consider this example: interface ComparisonOperator { [operator: string]: [string, string | number]; } The key can take on values such as >, >=, !=, and so ...

typescript

Using Typescript alongside Angular 1.6 and browserify for your development needs

Currently navigating the world of working with Angular types in TypeScript and bundling code using Browserify. After following a TypeScript guide related to Gulp, I utilized npm to install the Angular types and put together this simple ts file. import * a ...

angularjstypescriptbrowserify

Angular2: Continuous User Authentication Guard

I am in the process of developing an application that requires strict authentication for all users. To enforce this, I have created a LoggedInGuard. However, I find myself having to include canActivate: [LoggedInGuard] in every route definition within my ...

angulartypescriptangular2-routingangular2-guards

The error message states: "This is not a CombinedVueInstance type when using Vue with TypeScript

Most of the time, when I use this inside a method on my vue object, it correctly gets the type CombinedVueInstance. However, there are instances where it is assigned types like Vue when accessing this in a method, and Accessors<DefaultComputed> when ...

javascripttypescriptvue.jsvuejs2

What is the best way to implement a dynamic back button in Next.js?

Being familiar with creating a standard back button, I am now eager to craft one that directs the user back by one step in the URL rather than returning to the previous page. This way, I can utilize the button in various locations without needing to alter ...

reactjstypescriptnext.jsurl-routing

Transforming .d.ts files into HTML documentation

I possess a TypeScript declaration file (.d.ts) carefully documenting each function of an API. Can this documentation be elegantly displayed on a website in HTML format? Is there a solution for converting a .d.ts into a visually appealing .html document? ...

typescriptdocumentation

Jest encountered an UnhandledPromiseRejection error because the promise was unexpectedly resolved instead of being rejected

I am facing a difficult error message from Jest that I can't seem to figure out. The error message indicates that the promise is being resolved instead of rejected, causing an unhandled promise rejection. It's confusing because Jest expects an er ...

javascripttypescriptpromisejestjs

What is the best way to accomplish this using typescript/adonis?

While exploring some code examples on Bitbucket, I came across a sample that demonstrated how to paginate query results using JavaScript. However, as I attempted to apply it in my project, I encountered difficulties in declaring the types required for the ...

javascripttypescript

Whenever a file is chosen, I aim to generate the video HTML dynamically and display the video with play functionalities using Angular 2 and TypeScript

I am attempting to allow users to select a video file and display it so they can play it after choosing the file. Below is my HTML code: <br> <input type="file" (change)="fileChangeEvent($event)" placeholder="upload file..." class=" ...

angulartypescript

Bringing in functions from another class in TypeScript: A step-by-step guide

I am looking to import another class, specified by a name string (for example, 'B'), into the current class (named 'A'). The function in class B needs to be able to call a function in class A. I am seeking guidance on how to achieve thi ...

typescript

While attempting to utilize npm install, I encounter an error on a discord bot stating "msvsVersion is not defined."

Struggling with self-hosting a TypeScript discord bot, the setup process has been a puzzle. It's supposed to generate a build directory with an index.js file, but it's unclear. Installed Visual Studio Build Tools 2017 as required, yet running npm ...

node.jstypescriptdiscord.jssodium

Mistake in maintaining hydration with styled-components and React Context

I encountered an issue where I have two theme variants in my app - dark and light. You can view the sandbox example here ThemeContext.ts export const ThemeContext = createContext<{ theme: AppThemeInterface, setTheme: Dispatch<SetStateAction< ...

javascriptreactjstypescriptnext.jsstyled-components

What is the best way to transfer attributes from a nested component to its parent in Angular 10?

Within my parent component, I have a {{title}} and a {{subtitle}} that should dynamically change based on the title and subtitle of my children components. These children are rendered inside a router-outlet, with each child providing its own unique title a ...

angulartypescriptasynchronous

Capturing user audio on the client side with Angular

Is there a built-in feature in Angular to record client-side audio input? I have attempted using the p5 library, but it is encountering integration problems. ...

angulartypescript

Step by step guide on transferring data from one Angular 7 component to another component following API response retrieval

I have been tackling an issue related to an API recently. Upon receiving a response from the API, my goal is to pass the value to a child component. In this component, I will run a method to obtain a response and display it on the screen. Example Code: ...

angulartypescript

Convert a nested JSON array into TypeScript class objects

Within the database exist two distinct entities: 'person' and 'name'. These entities share a many-to-many relationship with the properties 'from' and 'to'. Person PersonName Name -- ...

jsonangulartypescriptspring-boothttp

What is the method for incorporating return types into the range function?

I came across this code snippet in you don't know JS yet and I'm attempting to incorporate types into it, but I'm feeling lost. function range(start: number, end?: number) { start = Number(start) || 0; if (end === undefined) { re ...

typescript