What is the process for downloading a .docx file encoded in Base64?

Trying to download a .docx file received from the backend.

The object being received is shown below:

https://i.sstatic.net/nHKpn.png

Download attempt using the following code:

const blob = new Blob([fileSource.FileData], { type: fileSource.FileType });

FileSaver.saveAs(blob, (fileSource as FileAttachmentDetail).FileName);

The downloaded file seems to be corrupted. When attempting to open it, the error displayed is:

https://i.sstatic.net/JzXXD.png

After choosing an option (yes or no), the message remains the same:

https://i.sstatic.net/xKKB3.png

What could be causing this issue?

angulartypescriptbase64filesaver.js

Answer №1

Prior to storage, it is essential to convert Base64 into binary form.

One way to achieve this is by utilizing the atob() method.

For further information, refer to: https://developer.mozilla.org/en-US/docs/Glossary/Base64

Give this a try:

Create a new Blob with the converted FileData using atob(), and specify the FileType.

Save the Blob using FileSaver with the file name obtained from the FileAttachmentDetail.

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

Parent and router-outlet in Angular 4 fashion

Suppose we are presented with the following code: <div class="container"> <div class="row"> <div class="col-sm-4 col-md-3"> <app-sidebar></app-sidebar> </div> <div class="c ...

javascriptangulartwitter-bootstrap-3

Issue at 13th instance: TypeScript encountering a problem while retrieving data within an asynchronous component

CLICK HERE FOR ERROR IMAGE export const Filter = async (): Promise<JSX.Element> => { const { data: categories } = await api.get('/categories/') return ( <div className='w-full h-full relative'> <Containe ...

reactjstypescriptnext.jsreact-typescriptnext.js13

Retrieving data and parameter data simultaneously from the ActivatedRoute

I am currently utilizing Angular and have a webpage where I need to send data to another page. Transmit an array of selected values Generate multiple records (associating with a model) this.activatedRoute.data.subscribe(({ model] }) => { setTim ...

angulartypescriptangular-routingangular-router

Error TS2532 in TypeScript indicates that there is a possibility that the object is undefined

Yesterday, WebStorm 2020.1 was installed on my computer. All of a sudden, I started encountering numerous TS2532 errors. How is it even possible for this to be "undefined"? Doesn't selectedOwner && prevent that? I attempted to eliminate thi ...

typescriptwebstorm

Issue with setting active slide value in ng2 Bootstrap Carousel – constantly defaults to slide 1

My current project implementation involves using . Although I have successfully implemented it, I am encountering an issue where slide 1 remains active at all times. I am unsure how to remove the active class from slide 1. The main challenge lies in sett ...

angularcarouselng2-bootstrap

Angular 5 ngx-modialog issue TS2307: Module 'ngx-modialog/plugins/vex' not located

After installing module ngx-modialog using the Angular 5 CLI like this: npm install --save ngx-modialog I then added it to my app.module.ts: import { VexModalModule } from "ngx-modialog/plugins/vex"; import { ModalModule } from "ngx-modialog"; @NgModul ...

angulartypescriptangular-cli

Divide Angular ngFor into separate divs

Here is an example of my current array: [a, b, c, d, e, f, g, h, i] I am aiming to iterate through it using ngFor and split it into groups of 3 elements. The desired output should look like this: <div class="wrapper"> <div class="main"> ...

javascriptangular

searchByTextContentUnderListItemAnchorTag

I would like to utilize the getByRole function for writing my test. However, I am encountering issues when using linkitem or 'link' as the role. It seems that I cannot find the desired element. // encountered error TestingLibraryElementError: The ...

javascripttypescriptunit-testingreact-testing-librarytesting-library

Angular does not adhere to globally defined styles

I have defined the margins for mat-expansion-panel in my styles.css file as follows: mat-expansion-panel { margin: 2vh; } Unfortunately, these margins will not be applied to my components unless they are also specified in the local CSS file. Even try ...

cssangulartypescriptstyling

Can a unique custom command be designed for the Kendo UI Grid in Angular2?

The built-in commands supported by the KendoUI Grid for Angular2 include: kendoGridAddCommand kendoGridCancelCommand kendoGridEditCommand kendoGridRemoveCommand kendoGridSaveCommand However, I am working on a project that requires a custom command to be ...

angularkendo-gridkendo-ui-angular2

Encountering an issue with Angular 5.2 application build on VSTS build server: Running into "CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory" error

Out of nowhere, the builds began failing with the following error : 2019-01-03T12:57:22.2223175Z EXEC : FATAL error : CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory error MSB3073: The command "node node_modules/webpack/bin/w ...

javascriptjquerynode.jsangularnpm

Placing a MongoDB query results in an increase of roughly 120MB in the total JS heap size

I'm puzzled by the fact that the heap size increases when I include a MongoDB database query in a function within my controller. Here is the code for my router: import { Router } from "express"; import profileController from '../contro ...

javascriptnode.jstypescriptmemory-leaksheap-memory

Unable to globally install @angular/cli using Node.js on Red Hat software collection

After installing node.js 8 from Red Hat Software Collection (rh-nodejs8), I encountered an issue where I couldn't globally install TypeScript or @Angular/CLI because my bash session was restricted by scl-utils, requiring admin rights for global instal ...

node.jsangulartypescriptnpmredhat

Validators in Angular forms are a powerful tool for enforcing

Is it possible to use Validators in the ts.file to display an error message when a field is invalid, rather than directly in the html? Thanks. html <form [formGroup]="form"> <mat-form-field> <mat-label>Nom</mat-label> ...

angulartypescript

Encountering a Typescript TypeError in es2022 that is not present in es2021

I'm attempting to switch the target property in the tsconfig.json file from es2015 to es2022, but I am encountering an error while running tests that seem to only use tsc without babel: Chrome Headless 110.0.5481.177 (Mac OS 10.15.7) TypeError: Can ...

javascripttypescripttsces2022

Angular components are experiencing issues with implementing Tailwind CSS

After incorporating Tailwind CSS into my Angular project, I noticed that it functions successfully at the root level of the project. However, when it comes to the SCSS files within individual components, it seems to be ineffective. Do I need to manually ...

angularsasstailwind-css

Best practices for working with child components in Vue.js using TypeScript: Steer clear of directly mutating props

I feel like I'm stuck in a loop here. Currently, I have a Vue.js 2 app set up and running with TypeScript. However, I'm encountering an issue when trying to pass data to a child component that originates from the store. <template> < ...

typescriptvue.js

Using Typescript to automatically infer strongly-typed recursive index types

Commencing with an Animal interface and a detailed map of animals residing on my farm: export interface Animal { species: string; edible: boolean; } export interface FarmMap{ [key: string]: Animal; } Everything seems to be running smoothly. Here ...

typescripttypescript-typings

Conceal the Angular Material toolbar (top navigation bar) automatically when scrolling downwards

In my Angular application, the main navigation consists of a standard toolbar positioned at the top of the page. My goal is to have this navigation bar smoothly scroll up with the user as they scroll down, and then reappear when they scroll back up. I at ...

cssangulartypescriptuser-experience

Steps to make ng-packagr detect a Typescript type definition

Ever since the upgrade to Typescript 4.4.2 (which was necessary for supporting Angular 13), it appears that the require syntax is no longer compatible. Now, it seems like I have to use this alternative syntax instead: import * as d3ContextMenu from ' ...

javascriptangulartypescriptd3.jsng-packagr