My Angular app retrieves a zip file as a blob from a Spring Boot backend. The zip file contains a PNG and 3 WAV files. Currently, I have no idea how to properly embed at least the PNG into the page.

Excuse my lack of knowledge, but I simply do not know how to convert this PNG stored as a string into an actual base64 format that I can embed into the page via a dynamically created HTML element in the DOM.

The component for downloading the zip file is this:

import { Component, OnInit } from '@angular/core';
import {PredictionArchiveDownloadService} from "./prediction-archive-download.service";

import * as jsZip from "jszip";
import * as jsZipUtils from "jszip-utils";

@Component({
  selector: 'app-prediction',
  templateUrl: './prediction.component.html',
  styleUrls: ['./prediction.component.scss']
})
export class PredictionComponent implements OnInit {

  constructor(private predictionArchiveDownloadService: PredictionArchiveDownloadService) { }

  ngOnInit(): void {
  }

  public downloadPredictionZipArchive(): void {
    this.predictionArchiveDownloadService.downloadPrediction()
        .subscribe(response => {
            console.log("Response body:")
            console.log(response.body)
            let filename = "prediction.zip";
            let blob: Blob = response.body as Blob;
            let a = document.createElement('a');
            a.download = filename;
            a.href = window.URL.createObjectURL(blob);
            a.click();

            jsZip.loadAsync(blob).then((zip) => {
                let files: string[] = [];
                Object.keys(zip.files).forEach((filename) => {
                    zip.files[filename].async('string').then((fileData) => {
                        files.push(fileData);
                    });
                });
                console.log("Files:");
                console.log(files);
                let spectrogram_image = document.createElement("img");
                console.log("PNG spectrogram:");
                console.log(files[3]);
                spectrogram_image.src = "data:image/png;base64," + files[3];
                let outputs_container = document.getElementById("outputs-container");
                outputs_container.append(spectrogram_image);
            });
        });
  }
}

I would be grateful for at least a hint on how to solve this issue. The console output seems to show a string of bytes, but I have no idea how to convert it these into PNG and WAV files.