Ionic 5 File opener Issue is file not found

Issue

I am use Ionic with angular and make one app. In my app i use couch DB for the download image.

I am using Android Phone.

I am trying to download my file with help of file opener and i got ->

(Status:9 message:file not found)

   <ion-item mode=md class="input-group ion-no-padding viewFile" lines=none *ngIf="common.isDocumentFill">
     <span (click)="doc(fc)">View File</span>
    </ion-item>

//function

doc(objFC) {

    let obj = {
      ServiceId: 1,
      CouchDBDocId: objFC.CouchDBDocId,
      DocumentName: objFC.FileName
    }
    this.api.getPdf(obj).subscribe((data: any) => {
     // debugger
      let blob = new Blob([data], { type: data.type });

      var downloadURL = window.URL.createObjectURL(data);
      var types = data.type
      this.down(downloadURL, types)
    }); 
 }
  down(filepath, mimeType) {
    this.fileOpener.open(filepath, mimeType)
     .then(() =>
     console.log('File is opened')
      )
     .catch(e => console.log('Error opening file', e)); 
    }

   

and Service

 getPdf(obj) {

    // debugger
    const httpOptions = {
      responseType: 'blob' as 'json'
    };

    return this.http.post(this.url + "DocumentDetails/DownloadFile", obj, httpOptions);
  } 

Solution

Please install required plugins

1.import { FileOpener } from '@ionic-native/file-opener/ngx';    
2.import { File } from '@ionic-native/file/ngx';

make instansts in constructor

  constructor(
         private fileOpener: FileOpener,
         private file: File
         )

put this function in your ts file

openPDF (stringBase64PDF) {
                debugger
                fetch('data:application/pdf;base64,' + stringBase64PDF, {
                    method: "GET"
                })
                .then(res => res.blob()).then(blob => {
                  console.log("created blob");
                  this.file.createFile(this.file.dataDirectory, 'temp.pdf', true)
                  .then(() => {
                    console.log("file created");
                    this.file.writeFile(this.file.dataDirectory, 'temp.pdf', blob, { replace: true })
                    .then(res => {
                      console.log("file writed");
                      this.fileOpener.open(res.toInternalURL(), 'application/pdf')
                      .then((res) => {
                        console.log('file opened')
                      }).catch(err => {
                        console.log('open error')
                      });
                    }).catch(err => {
                      console.log('write error')     
                    });
                  }).catch(() => {
                    console.log("create error");
                  })
                  
                }).catch(err => {
                  console.log('blob error')
                });
              }

put in html file

  <ion-item (click)="openPDF(base64pdf)">
             <ion-label>Click here to open pdf file</ion-label>
            </ion-item>  

Answered By - Mansi Mistry