How to download file from url in Ionic 5 without using FileTransfer

Question

I'm currently developing Ionic app now and stuck at file download part. I saw many posts that FileTransfer cordova library is now deprecated in favor of XHR request.

Even though I saw many posts that the library is deprecated, I can't find any sample code (for downloading file from URL).

Could anyone please suggest me good way to download file from url without using FileTransfer plugin?

Answer 1

Downloading files from another server may cause annoying CORS error which is mostly beyond our control. The safest way is to bypass the Webview and download the file natively. You may use Native HTTP plugin

Use in Ionic 4 or above will look like:

import { Component } from '@angular/core';
import { HTTP } from '@ionic-native/http/ngx';
import { File } from '@ionic-native/file/ngx';
        
@Component({
   selector: 'app-home',
   templateUrl: './you-file.html',
   styleUrls: ['./your-file.scss'],
})

export class HomePage {
    constructor(private nativeHTTP: HTTP, private file: File) {}
        
     private downloadFileAndStore() {
        //
        const filePath = this.file.dataDirectory + fileName; 
                         // for iOS use this.file.documentsDirectory
        
        this.nativeHTTP.downloadFile('your-url', {}, {}, filePath).then(response => {
           // prints 200
           console.log('success block...', response);
        }).catch(err => {
            // prints 403
            console.log('error block ... ', err.status);
            // prints Permission denied
            console.log('error block ... ', err.error);
        })
     }
  }
}

Answer 2

You can just open the url with window. But this will open a browser and download the file there. It will do the trick although it is not pretty:

your.page.ts:

function download(url){
  window.open(url, "_blank");
}

your.html:

<a href="javascript:void(0)" (click)="download(yourUrl)">Your file name</>