Transforming a base64 string into a uint8Array or Blob within Typescript/Angular8

I'm new to handling Base64 encoded strings, uint8Array, and Blobs. I've integrated a pdf viewer library from this repository https://github.com/intbot/ng2-pdfjs-viewer into our Angular 8 web application. I'm facing an issue where I am sending a large Base64 string (550KB) that contains 34 pages of text to the UI for rendering by the pdf viewer.

The problem arises when only 19 pages are displayed in the viewer, even though all 34 pages are present when downloading the document using the viewer and checking with the Preview app on MacOS. I'm uncertain whether the problem lies with the pdf viewer library or the conversion process from Base64 to uint8Array/Blob.

Below is the code snippet used in the UI to convert the Base64 string:


dostuff(b64Data){
    const byteCharacters = atob(b64Data);
    const byteNumbers = new Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    //const blob = new Blob([byteArray], {type: 'application/pdf'});
    //console.log(blob)
    return byteArray
}

Any assistance would be highly appreciated. Browser used: Chrome

Answer №1

The problem has been successfully resolved by identifying a backend API issue that was causing difficulties in merging PDFs. By utilizing Apache PDFBox's pdf merger utility, which supports input streams, the merged PDF document was able to be generated and viewed seamlessly using the ng2-pdfjs-viewer library. It is confirmed that there were no issues with the JavaScript code provided above.

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

The loading of woff2, woff, and ttf files resulted in a 400 error

Can you explain why the woff2, woff, and ttf files in the "assets" folder are not loading? Any suggestions on how to fix this issue? ...

The `@ViewChild` reference cannot be found

My main challenge is toggling a @ViewChild element using an *ngIf, followed by invoking a native event. This snippet shows my HTML element, tagged with #audioPlayer for extracting it through @ViewChild. <audio #audioPlayer *ngIf="convers ...

Guide on showing form submissions in a separate component using Angular 8

Currently, I am delving into the world of Angular and experimenting with showcasing form data submitted in a component different from where the form is located. This is how I structured my application: I crafted the form in one component, established a us ...

How can I place an Object in front of an Array in JavaScript?

Currently, I am working on an Angular project where I need to modify a JSON array in order to display it as a tree structure. To achieve this, the objects in the array must be nested within another object. Desired format / output: this.nodes = [ { id ...

Creating a dynamic table in HTML with Angular by programmatically inserting rows using components

There's a peculiar issue that I'm facing and I just can't seem to figure out why it's happening. My goal is to display an HTML table using Angular 4. When I use the following syntax to output the table, everything works perfectly: < ...

What is the impact on active subscriptions when the browser is closed or refreshed?

Within the app component (the root component) of an Angular application, I have a few subscriptions set up. Since the app component remains active and is never destroyed until the application is closed, the ngOnDestroy method of the app component does not ...

What is the recommended way to use the async pipe to consume a single Observable property in a view from an Angular2

Suppose I have a component with the following property: import { Component, OnInit } from 'angular2/core'; import { CarService } from 'someservice'; @Component({ selector: 'car-detail', templateUrl: './app/cars/ ...

What could be causing the Ioncol not triggering the Onclick event?

I am facing an issue where my onclick event is not working on an ion-col. The error message says that the method I call "is not defined at html element.onclick". Here is a snippet of my code: <ion-row style="width:100%; height:6%; border: 1px solid # ...

I encountered difficulties connecting mongoose to my local MongoDB server

Hello Everyone! Currently, I am in the process of linking my node.js project to mongodb. Initially, everything worked smoothly when I used mongodb atlas. However, when I attempted to connect it using mongodb compass, I faced some issues and nothing seemed ...

"Navigate with ease using Material-UI's BottomNavigationItem and link

What is the best way to implement UI navigation using a React component? I am currently working with a <BottomNavigationItem /> component that renders as a <button>. How can I modify it to navigate to a specific URL? class FooterNavigation e ...

Sometimes the valueChanges of a Firestore collection in Take(1) can be inconsistent

Currently, I am incorporating AngularFire2 into my project. In the service that I have created, it looks like this: getItems(thing: string): Observable<Item[]> { return this.db.collections('item', ref => ref.where('things' ...

What is the most effective method for comparing and updating objects within arrays or lists in frontend Angular applications using TypeScript?

While I acknowledge that this approach may be effective, I am of the opinion that there exists a superior method to accomplish the same goal I have two separate lists/arrays containing distinct objects, each with a common attribute. My objective is to ite ...

Issue with Angular: Unable to properly sort data while modifying queryParams

Within the component.ts file: export class TabsComponent implements OnInit { constructor( private store$: Store<UsersState>, private router: ActivatedRoute ) {} ngOnInit(): void { this.onFilterByIncome(); this.router.queryParam ...

Observable subscription not updating HTML with changes

My challenge is passing an object to the Object Model using a shared service to an already loaded component. Even though I receive data after subscribing, it does not reflect in the HTML view. <div *ngFor="let emp of emps" class="card&q ...

What is the best way to retrieve the data from a specific section when a checkbox is selected in Angular 2?

When I select a checkbox for any section and then click the submit button, I want to display the details of that section in the console. Can someone assist me with this? **Stackblitz link:** : https://stackblitz.com/edit/angular-q7y8k1?file=src%2Fapp%2Fa ...

replace the tsconfig.json file with the one provided in the package

While working on my React app and installing a third-party package using TypeScript, I encountered an error message that said: Class constructor Name cannot be invoked without 'new' I attempted to declare a variable with 'new', but tha ...

What is the process for removing a document with the 'where' function in Angular Fire?

var doc = this.afs.collection('/documents', ref => ref.where('docID', '==', docID)); After successfully retrieving the document requested by the user with the code above, I am unsure of how to proceed with deleting that do ...

Unable to import necessary modules within my React TypeScript project

I am currently building a React/Express application with TypeScript. While I'm not very familiar with it, I've decided to use it to expand my knowledge. However, I've encountered an issue when trying to import one component into another comp ...

Is there a way to determine the most recent Typescript target compatibility for every Node version?

When using any version of Node, how can I identify the appropriate Typescript Compiler Option for target that offers the most functionality? I want to eliminate any guesswork. Specify the ECMAScript target version as: "ES3" (default), "ES5", "ES6"/"ES20 ...

Creating a union type from an array that is not a literal (using `Object.keys` and `Array.map`)

Can a union be derived from a non-literal array? I attempted the following: const tokens = { "--prefix-apple": "apple", "--prefix-orange": "orange" }; const tokenNames = Object.keys(tokens).map(token => toke ...