Get the base 64 file and convert it to an Excel spreadsheet

The encoded data in base 64 format is provided below.

UEsDBBQAAAAIAIlimE8HQU1igQAAALEAAAAQAAAAZG9jUHJvcHMvYXBwLnhtbE2OPQsCMRBE/8px\nvbdBwUJiQNBSsLIPexsvkGRDskJ+vjnBj24ebxhG3wpnKuKpDi2GVI/jIpIPABUXirZOXaduHJdo\npWN5ADvnkc6Mz0hJYKvUHqgJpZnmTf4Ojkafcg4erXhO5uqxcGUnw6UhBQ3/cm3eqdQ17yb1lh/W\n8DtpXlBLAwQUAAAACACJYphPJoGuS+4AAAArAgAAEQAAAGRvY1Byb3BzL2NvcmUueG1szZLBSsQw\nEIZfRXJvp8mKaOjmonhSEFxQvIVkdjds04RkpN23N627XUQfwGNm/nzzDUxrojQh4UsKERM5zFej\n7/osTVyzPVGUANns0etcl0RfmtuQvKbyTDuI2hz0DkE0zQ14JG01aZiAVVyITLXWSJNQU0gnvDUL\nPn6mboZZA9ihx54y8JoDU9PEeBy7Fi6ACUaYfP4uoF2Ic/VP7NwBdkqO2S2pYRjqYTXnyg4c3p+f\nXud1K9dn0r3...

I need assistance to save this as .xls file by clicking a button using typescript in angular 6.

angulartypescriptbase64xls

Answer №1

One way to make this string safe is by using DomSanitizer and setting the type as 

data:application/octet-stream;base64
.

To ensure the safety of the string, a custom pipe called safe has been implemented. Feel free to check it out on stackblitz.

View Demo

HTML Code Snippet

<a [href]="'data:application/octet-stream;base64,' + data | safe" download="excel.xls">Download</a>

Code for safe.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) { }

  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

Answer №2

To save files, consider using the file-saver library.

import * as FileSaver from 'file-saver';

saveFile() {
    saveAs(this.base64data, `filename.xls`)
}

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 could be causing the Angular/TypeScript model that I imported to fail to properly map to my service within my Angular application?

Struggling with implementing a system for manual entry of mutual fund information, I am running into errors when trying to read properties from the 'fund' model in my application. The Developer Tools console is displaying the following error mess ...

angulartypescriptmean-stack

How can you generate a "Package Contains Lower Node Version" error message during the installation of an NPM package if the node version is higher than the current system's node version?

I am looking for a way to trigger an error during the installation of an NPM package if the node version supported by that module does not match the system/server node version. Specifically, I want to prevent the installation of any npm module that suppor ...

javascriptnode.jsangularreactjsnpm

Learn how to dynamically include files within the script tag using Angular4

Is there a way to dynamically include a remote file in a script tag using Angular4? For instance, if I have a file named https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js as a query string parameter in the URL located in the address bar http: ...

node.jsangular

What is the most effective method for locating and modifying the initial instance of an element within a group?

In my Javascript/Typescript collection, I have the following items: [ {"order":1,"step":"abc:","status":true}, {"order":2,"step":"xyz","status":true}, {"order":3,"step":"dec","status":false}, {"order":4,"step":"pqr","status":false}, {"order":5,"step":" ...

javascriptarraysalgorithmtypescript

The softAssert method is not available when trying to implement soft assertions within a TypeScript-based Protractor framework

Uncaught TypeError: assertion.softAssert is not a function I recently included a package called soft-assert using npm in my project. To install this package, I executed the following command: npm i soft-assert -g --save-dev Incorporated the following co ...

typescriptnpmprotractornode-modulesassert

Errors in TypeScript are being brought up by using if-else statements inside a loop

I am currently working on a function to retrieve referral codes from users. The user inputs a code, which is then checked against the database to see if it exists or not If the code provided matches the current user's code, it should not be accept ...

javascripttypescript

Navigating between two different HTML pages using Angular 2 routing

In my Angular2 application, I have both a front-end section and an admin interface. The front-end section is styled with its own unique set of styles defined in the index.html file. On the other hand, the admin interface has a completely different set of ...

angularangular2-routing

Unraveling the mystery of "??=" in Javascript/Typescript code

In a recent TypeScript code snippet, I came across the following: const arrayAA: Record< someSchema['propX'], typeof arrayBB > = {}; for (const varB of arrayBB) { (arrayAA[someStringValue] ??= []).push(varB) } What is ...

javascripttypescript

Issues with implementing flexbox layout in an Angular application

Trying to implement a flexbox layout with the following elements: <application> <flex-container> <page-content> <template-content> </template-content> </page-content> </flex-container> ...

htmlcssangularlayoutflexbox

How to prevent or disable the hardware back button on an Ionic 4 device

I am currently utilizing Angular routing with @angular/router in my Ionic 4 project. I have been attempting to disable the device back-button in Ionic 4, but prevent-default is not working for me. Below is the code snippet from my app.component.ts file: ...

angulartypescriptionic-frameworkionic4angular-router

Creating an iterable type in TypeScript with key-value pairs - a beginner's guide

I am trying to define a type in TypeScript that represents an object with dynamically generated keys. How can I achieve this? { dog: true, cat: true, x: true } Currently, I am using the 'any' type but I would like to define a proper t ...

javascriptreactjstypescripttypestypescript-typings

Each page in NextJS has a nearly identical JavaScript bundle size

After using NextJS for a considerable amount of time, I finally decided to take a closer look at the build folder and the console output when the build process is successful. To my surprise, I noticed something peculiar during one of these inspections. In ...

javascripttypescriptwebpackbabeljsnext.js

Node.js built-ins require shims, while global variable names are absent

After updating my project using npm-check-updates, I encountered a strange error that stumped me. Despite following the suggested terminal command to install polyfill-node, the issue persisted with no resolution in sight online. The error displayed on the ...

node.jstypescriptnpmsvelterollupjs

Challenges with Typescript Integration in Visual Studio 2013

Currently diving into typescript as a newbie while going through the Angular tutorial using Visual Studio 2013 for work, which is also new to me. The frustrating part is that Visual Studio seems to be assuming I am going to use a different language (judgin ...

angulartypescriptvisual-studio-2013

Innovative solution for detecting and replacing undefined object properties in Angular 2 with TypeScript

After encountering the issue of core.umd.js:3523 ORIGINAL EXCEPTION: Cannot read property 'fullName' of undefined I realized that the Exception stemmed from a Template trying to access a specific property: {{project.collaborators["0"]["fullN ...

javascriptangulartypescriptundefined

Is it feasible to update just one key within an exported type using setState in TypeScript?

Recently, I decided to dive into Typescript within my React App and encountered an error that has left me stumped. I'm wondering if it's possible to access a specific key in an exported type and modify its value? Here is how I've exported ...

javascriptreactjstypescriptreact-hookssetstate

Issues with POST requests in Angular causing failures

I am currently developing a web application using Angular version 5 or higher. My goal is to set up a POST request where the user can input a company name, which will then be saved to a MongoDB database. Given that this is my first Angular project, I am c ...

angular

Why isn't the table in the select query updating after an insert query is executed in Express?

Seeking assistance! Currently, I am delving into express and typescript. I have encountered an issue where the table from a select query does not update after an insert query when rendering a view. Strangely, the data in the table remains unchanged (showin ...

mysqlnode.jstypescriptexpress

Dealing with type errors involving null values when using interfaces in Typescript

I encountered an issue related to the error property within the defaultState constant: interface AuthState<T = any> { auth: T; error: null | Error; loading: boolean; } export const defaultState: { auth: null | AuthState } = { auth: null, e ...

typescripttypescript-typings

Deciphering TS2345: "The argument supplied, known as 'typeof MyComponent', cannot be assigned to the specified parameter type"

I am facing an issue while attempting to integrate a Typescript React component with react-onclickoutside. The error message that I encounter is as follows: TS2345: Argument of type 'typeof MyComponent' is not assignable to parameter of type &apo ...

reactjstypescript