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

Observable<Any> Filter

I am currently utilizing Typescript and Angular 4 in my work. Within my project, I have two lists implemented using rxjs/Rx. ... myList: Observable<MyClass[]>; filteredList: Observable<MyClass[]>; ... My objective is to filter the myList base ...

What is the best way to verify a field against a set of string values using Typescript in a NestJS application

I currently have an Enum containing various timezones listed below export enum Timezones { 'Europe/Andorra', 'Asia/Dubai', 'Asia/Kabul', 'America/Antigua' } In the DTO file, I am attempting to valid ...

Can someone please explain how to bring in the Sidebar component?

click here for image description check out this image info An issue arises as the module '@components/Sidebar' or its type declarations cannot be located.ts(2307) Various attempts were made, including: import Sidebar from '@components/Sid ...

Executing an Angular 4 script using a scheduled CRON job

We are currently facing a challenge with our Angular-built APP for Android phones. The logic has become quite intricate and we have decided to transfer it to our server, where it can be executed as a CRON job every hour instead of within the Phone APP it ...

"Receiving an error message stating 'Was expecting 1 parameter, received 2' while trying to pass a useState function in TypeScript

I am encountering an issue with a component where I pass a useState setter to a utility function: export interface IData { editable: string[]; favourited: string[]; } const [data, setData] = useState<IData | undefined>(undefined) useEffect(() = ...

Error encountered when referencing prop on textarea: 'There is no suitable overload for this call'

I've been referring to the documentation in order to set a reference using the useRef hook, with the goal of being able to programmatically clear an input field. However, when I add ref as a prop to a textarea, it triggers a lint error saying that no ...

What is the process for integrating Vue plugins into Vue TypeScript's template?

Seeking guidance on integrating Vue plugins into Vue TypeScript's template, for example with vue-webpack-typescript. Specifically interested in incorporating vue-meta. Included the following code in ./src/main.ts: import * as Meta from 'vue-me ...

Returning a 'never' type from a function in React using Typescript

Basically, I have a function that initiates the OAuth flow (redirecting to Google OAuth login page, for example): async function signIn() { // start OAuth flow } And let's say I want to use it in a useEffect hook like this: ... useEffect(() => { ...

Assign the onClick function to the decoration of a Vscode extension

When I click on a vscode decoration, I want to trigger a function. Here's the code I created for this: const decoration = { range, hoverMessage: `${command} ${input}`, command: { title: 'Run Function', command: ' ...

Learn the process of transferring a complete JSON object into another object using Angular

I'm having trouble inserting one object into another. My JSON object is multidimensional, like this: { "item1":{ "key":"Value", "key":"Value" }, "item2":{ "key ...

How to eliminate the button from Google Maps API using JavaScript

I am trying to implement a specific functionality on my map. When the user drags the map, I want a button named 'Search in this area' to appear. Once the user clicks on the button, it should disappear so that the search can't be performed ag ...

Compiling an Angular project with an external library in AOT mode using angular-cli is causing issues and not compiling successfully

Embarking on a fresh new project, I utilized angular-cli 8.1.2 for the generation process. The goal is to establish a shared library that caters to multiple microservices (apps). This particular library should remain separate from the applications folder, ...

I am looking to access a public method from a different component in Angular 2

Trying to access the headerExpand property from app.component is causing an error message in the console: metadata_resolver.js:559 Uncaught Error: Invalid providers for "Page1" - only instances of Provider and Type are allowed, got: [?undefined?] page1 ...

Eliminate the usage of JSON.stringify in the Reducer function

I have a system where I store chat messages in a dictionary with the date as the key and a list of messages as the value. Whenever a new message is added, the following code snippet is executed. Is there a way to enhance the existing code to eliminate the ...

Post-Angular migration (going from version 12 to 14), there are still lingering security risks associated with the "d3-color vulnerable to ReDoS" issue

Following the migration to Angular 14, I made sure to update my "@swimlane/ngx-charts" version to "20.1.2" and the "d3" version to "7.8.4". However, even after running the npm install command, I am still encountering 5 high severity vulnerabilities in my p ...

Can the GitHub URL be utilized for installing TypeScript npm dependencies?

When working with an npm library written in TypeScript, the usual process involves writing the source code in TypeScript, pushing it to GitHub, then converting it to JavaScript and pushing the resulting JavaScript code to the npm repository. When adding ...

Tips on sending a jsonp request in Angular2 without relying on JSONP_CALLBACK

I am attempting to send a JSONP request to a third-party website, where the callback name remains constant, regardless of what I input in the callback= parameter. Is there a method in Angular2 to specify a custom callback name? ...

Set the default page for the p-table

My English proficiency is lacking. I am currently using a p-table with pagination, but I need to modify the pagination in the HTML code. <p-table #dt [columns]="cols" [value]="values" [paginator]="true" [rows]="10" (onFilter)="filtra ...

Guide for integrating CryptoJS with Angular 2 and TypeScript within a WebPack build setup

Looking for advice on integrating the CryptoJS library with Angular 2 using TypeScript? Many existing resources are outdated and assume the use of SystemJS. Can someone provide straightforward instructions for incorporating CryptoJS with Angular 2 and Type ...

Executing a single insert statement in a TypeScript Express application using PostgreSQL is taking over 240 milliseconds to complete

Seeking assistance with optimizing a db insert operation test using mocha for a node.js express app that utilizes fp-ts and pg npm package. The tests run successfully, but the insert test is taking over 240 ms to complete. The database table has a maximum ...