Download .csv File with angular 2 - Ionic 2

Ionic Framework ionic-v3
1

I have an Ionic 2 app, and I need to download sample.csv file from server. I already have the url that I need to do the request:

  let url = 'http://example.com/download/sample.csv';

I want to know how to do this. I tried with ionic2 FileTransfer:

 importleads(){
    const fileTransfer: TransferObject = this.transfer.create();
    let url = 'http://example.com/download/sample.csv';
    fileTransfer.download(url, this.file.dataDirectory + 'Import_Leads_Sample.csv').then((entry) => {
      if(entry) {
        console.log('download complete: ' + entry.toURL());
        let alert = this.alertCtrl.create({
        title: 'Lead Downloaded Successfully',
        buttons: [{
                 text: 'Ok',
                }]
        });
        alert.present();
      }
      else{
        let alert = this.alertCtrl.create({
        title: 'No File to download',
        buttons: [{
                   text: 'Ok',
                 }] 
        });
        alert.present();
     }
  });
}

<button ion-button (click)="importleads()">Test File Download</button>

I have generated the android-debug.apk file and installed it in Samsung phone. I am getting alert message as Lead Downloaded Successfully but no file gets downloaded in the device. I searched entire phone disk but no file found.

If I put this url in browser, it starts to download, but not with FileTransfer.

2

What does it output in the console?

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Chrome dev tools: Remote Debug your Ionic App · ionic.zone Look at the console tab.

3

When I run it on chrome developer browser Below is the error message I am getting when I click on the Test File Download :

XMLHttpRequest cannot load http://example.com/download/sample.csv. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access.

4

There you have it - add this header and you will be able to access this file.

If you don’t control the server you can also proxy the request through a server that you do control where you add the header. Or you can use a hosted service like http://crossorigin.me/ or https://cors-anywhere.herokuapp.com/ (but please, only for development).

5

I get that people just want things to work, but CORS is there for a reason. If you don’t control the server, convince the person who does to properly implement CORS. If you can’t do that, find another server. I really don’t want people setting up unsecured proxies all over the place to subvert important security mechanisms.

6

@Sujan12 I am trying this in mobile, will it work ?

7

With the header, yes.

8

No its not working on mobile device. Their is no file downloaded in the mobile. I have generated the android-debug.apk file and checked.

No luck.

9

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Chrome dev tools: https://ionic.zone/debug/remote-debug-your-app#android Look at the console and network tabs for errors.