How to download and save a pdf file on mobile device using Capacitor

Ionic Framework Ionic Angular
1

The idea
I’ve uploaded a pdf file in the MySQL database and I get the data from API response in array buffer format. I convert it to blob and then URL. And then I would like to download and open it on mobile. It’s been working fine in browsers with the code below. But I’m new to capacitor and not sure what I’m doing wrong while trying to make it work in mobile. Hope someone can help me with this. Thanks in advance!

The URL format is
blob:http://localhost:8100/b5d07b5e-233d-4929-985e-ad471ff92606

The code I have been using to test the download on the browser.

getPdfFile(item){  
    let array = new Uint8Array(item);
    let blob = new Blob([array], { type: 'application/pdf' });
    let url = URL.createObjectURL(blob);
    this.modalName = array;
    let fileName: string = new Date().toLocaleDateString();
    try {
      const link = document.createElement('a');
      if (link.download !== undefined) { 
        link.setAttribute('href', url);
        link.setAttribute('download', fileName);
        link.style.visibility = 'hidden';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }
    } catch (e) {
      console.error('BlobToSaveAs error', e);
    }
  }

the code using Capacitor

import { HttpClient, HttpEventType } from '@angular/common/http';
import {Plugins,FilesystemDirectory} from '@capacitor/core';
import {FileOpener} from '@ionic-native/file-opener/ngx';

const {Filesystem, Storage} = Plugins;
export const FILE_KEY = 'files';

async loadFiles(){
    const videoList = await Storage.get({key:FILE_KEY});
    this.myFiles = JSON.parse(videoList.value)||[];
  }

  private convertBlobToBase64 = (blob :Blob)=>new Promise ((resolve,reject) =>{
    const reader = new FileReader;
    reader.onerror = reject;
    reader.onload = () =>{
      resolve(reader.result);
    };
    reader.readAsDataURL(blob);
  });

  private getMimetype(name){
    if(name.indexOf('pdf') >=0) {
      return 'application/pdf';
    }
  }

  getPdfFile(item){  
    let array = new Uint8Array(item);
    let blob = new Blob([array], {type:'application/pdf'});
    let url = URL.createObjectURL(blob);
    let fileName: string = new Date().toLocaleDateString();
    try {
      this.http.get(url , {
        responseType : 'blob',
        reportProgress: true,
        observe:'events'
      }).subscribe(async event =>{
        if(event.type === HttpEventType.DownloadProgress){
          this.downloadProgress = Math.round((100 * event.loaded)/event.total);
        }
        else if(event.type === HttpEventType.Response){
          this.downloadProgress = 0;
  
          const name = url.substr(url.lastIndexOf('/') + 1);
          const base64 = await this.convertBlobToBase64(event.body) as string;
  
          const savedFile = await Filesystem.writeFile({
            path: name,
            data: base64,
            directory: FilesystemDirectory.Documents,
          });
  
          const path = savedFile.uri;
          const mimeType = this.getMimetype(name);
  
          this.fileOpener.open(path,mimeType)
          .then(()=> console.log('File is opened'))
          .catch(error => console.log('Error opening file',error));
  
          this.myFiles.unshift(path);
          
          Storage.set({
            key:FILE_KEY,
            value: JSON.stringify(this.myFiles)
          })
        }
      })
      }
    catch (e) {
      console.error('BlobToSaveAs error', e);
    }
  }

What I have installed

npm install @ionic-native/file-opener cordova-plugin-file-opener2 cordova-plugin-androidx cordova-plugin-androidx-adapter @angular/core @ionic-native/core

I tried using the file-opener2 Cordova plugin but it gives an error when I try to convert the project to apk. |690x390

3

Update
Fixed it by :

npm install jetifier
npx jetify
npx cap sync android

If you’re having the same problem as me, the commands above should work, but if they don’t take a look at:

4

Try Capacitor File Opener Plugin - Capawesome this package also works
!