Angular fixes corrupted Excel files

Question

Angular fixes corrupted Excel files

My current project involves using Angular to call an API and retrieve a byte[] of an Excel file. However, I am facing issues with the file becoming corrupted when I convert the byte[] to a file using blob. Can anyone offer assistance with this problem?
My Angular version is 9.

service.ts:

downloadFile(req?: any): any {
    const options = createRequestOption(req);
    return this.http.get(`${this.resourceUrl}/print`, {
       params: options,
       responseType:'blob' })
   .toPromise();
}

component.ts:

import {saveAs} from 'file-saver';

export():void{
this.exportService.downloadFile({}) .then((blob:any)=> {
saveAs(blob, 'test.xlsx');
});
}

API response

Link to view my Excel file:

arrays angular typescript blob export-to-excel

Answer 1

Answer №1

Kindly update your response type in the following manner:

fetchFile(req?: any): any {
    const options = createRequestOption(req);
    return this.http.get(`${this.resourceUrl}/download`, {
       params: options,
       responseType: ResponseContentType.Blob })
   .toPromise();
}

Revise your code to the one provided below and include Blob

exportData():void{
    this.exportService.fetchFile({}) .then((data:any)=> {

let blob = new Blob([data], {type: 'text/csv'});
        saveAs(blob, 'exportedData.xlsx');
        });
     }

Answer 2

Kindly update your response type in the following manner:

fetchFile(req?: any): any {
    const options = createRequestOption(req);
    return this.http.get(`${this.resourceUrl}/download`, {
       params: options,
       responseType: ResponseContentType.Blob })
   .toPromise();
}

Revise your code to the one provided below and include Blob

exportData():void{
    this.exportService.fetchFile({}) .then((data:any)=> {

let blob = new Blob([data], {type: 'text/csv'});
        saveAs(blob, 'exportedData.xlsx');
        });
     }

Answer 3

Answer №2

I prefer not to do this on my own, thank you. I am uncertain about the best answer but this seems to work.

 convertToByte(file = ''): Observable<HttpResponse<string>>{
  return this.http.get(`${this.resourceUrl}/convertToByte`, {
    responseType: 'text',
    observe: 'response'
  }).pipe(map((res: HttpResponse<string>) => this.byteToFile(res,file)));
}


private byteToFile(res: HttpResponse<string>,file:string): HttpResponse<string> {
    if(res.body){
     const fileName = file;
     const a = document.createElement('a');
     document.body.appendChild(a);
     const sliceSize = 512;

     const byteCharacters = res.body;
     const byteArrays = [];

     for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
       const slice = byteCharacters.slice(offset, offset + sliceSize);

       const byteNumbers = new Array(slice.length);
       for (let i = 0; i < slice.length; i++) {
         byteNumbers[i] = slice.charCodeAt(i);
       }

      const byteArray = new Uint8Array(byteNumbers);

      byteArrays.push(byteArray);
    }

    const blob = new Blob(byteArrays, {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
    const fileURL = window.URL.createObjectURL(blob);
    a.href = fileURL;
    a.download = fileName;
    a.click();
  }
  return res.clone();
}

Answer 4

I prefer not to do this on my own, thank you. I am uncertain about the best answer but this seems to work.

 convertToByte(file = ''): Observable<HttpResponse<string>>{
  return this.http.get(`${this.resourceUrl}/convertToByte`, {
    responseType: 'text',
    observe: 'response'
  }).pipe(map((res: HttpResponse<string>) => this.byteToFile(res,file)));
}


private byteToFile(res: HttpResponse<string>,file:string): HttpResponse<string> {
    if(res.body){
     const fileName = file;
     const a = document.createElement('a');
     document.body.appendChild(a);
     const sliceSize = 512;

     const byteCharacters = res.body;
     const byteArrays = [];

     for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
       const slice = byteCharacters.slice(offset, offset + sliceSize);

       const byteNumbers = new Array(slice.length);
       for (let i = 0; i < slice.length; i++) {
         byteNumbers[i] = slice.charCodeAt(i);
       }

      const byteArray = new Uint8Array(byteNumbers);

      byteArrays.push(byteArray);
    }

    const blob = new Blob(byteArrays, {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
    const fileURL = window.URL.createObjectURL(blob);
    a.href = fileURL;
    a.download = fileName;
    a.click();
  }
  return res.clone();
}

Angular fixes corrupted Excel files

Answer №1

Answer №2

Similar questions

Creating cascading select fields in Angular using form controls

What could be causing my NodeJS Backend to not retrieve the data properly?

Displaying text and concealing image when hovering over a column in an angular2 table

Get notified about the number of cells you've selected by simply dragging on a table

Achieve HTTPS with angular-cli when running ng serve

Angular2: Ensuring Sequential Execution Line by Line - A Comprehensive Guide

How do RxJS collection keys compare?

Using a parameter as a key index in JavaScript

TypeScript: Retrieve the data type of the provided object

Having trouble correctly displaying a form with nested form array within a form group

Get the minimum value from an array that is dynamically generated using PHP

A guide on activating the <b-overlay> component when a child triggers an Axios request in vue.js

How can I restrict the return type of a generic method in TypeScript based on the argument type?

Port 4200 is currently being utilized. Please utilize the '--port' option to designate an alternative port

Tips for patiently anticipating the outcome of asynchronous procedures?

PHP array multiplication of digits

The Angular Material Theme is not being properly displayed on the mtx-datetimepicker component

Showing content based on the route - Angular

Angular 2: Emptying input field value on click event

Issues arise when Typescript fails to convert an image URL into a base64 encoded string