base64 file to be downloaded in capacitor iOS and Android

I've an app made in angular and I'm packaging the app with capacitor for both iOS and Android. The app contains attachments which I request from back end and the result is base64 string. I manage to download the file without issues in Web, but the files are not downloadable in mobile version. Here's the download code.

<div *ngFor="let attachment of attachmentsInput, let i = index">
                                <div class="row pl-1 pr-1">
                                    <div class="col-lg-7">
                                        <a role="button" (click)="downloadFile(i)" class="hover">
                                            
                                            <span class="hover">{{attachment.name}}</span>
                                        </a>
                                        <a style="display: none;" id="downloadLinkId+{{i}}" [href]="attachmentsInput[i].toBeDownloaded" [download]="attachmentsInput[i].name"></a>
                                    </div>
                                 
                                </div>
                            </div>

Download file code:

async downloadFile(index) {
  this.attachmentsInput[index].toBeDownloaded = this.sanitizer.bypassSecurityTrustResourceUrl('data:image/jpg;base64,' + this.attachmentsInput[index].content);


if (this.attachmentsInput[index].toBeDownloaded)
      document.getElementById('downloadLinkId+' + index).click();
}

Is there a problem in using document.getElementById ?

Solution

downloading from the link does not work in native applications. For such, you need to use the Filesystem API, for example:

import { FilesystemDirectory, Plugins } from '@capacitor/core';
const { Filesystem } = Plugins;

await Filesystem.writeFile({
    path: "filename.txt",
    data: "base64 data",
    directory: FilesystemDirectory.ExternalStorage,
  });