# Generate / download a CSV file with Ionic

**URL:** <https://forum.ionicframework.com/t/generate-download-a-csv-file-with-ionic/63104>\
**Category:** ionic-v3\
**Created:** [September 11, 2016, 9:20am UTC](https://forum.ionicframework.com/t/generate-download-a-csv-file-with-ionic/63104 "2016-09-11T09:20:45Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![UrbanCondor](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/urbancondor/32/103029_2.png) [@UrbanCondor](https://forum.ionicframework.com/u/UrbanCondor)\
**Post date:** [September 11, 2016, 9:20am UTC](https://forum.ionicframework.com/t/generate-download-a-csv-file-with-ionic/63104/1 "2016-09-11T09:20:45Z")

</div>

I’ve just spent a few hours trying to work out exactly how I can convert a JSON array into a CSV file which the user can save to their phone. The use case for this scenario is as follows:

- User opens App
- App displays results from a noSQL database as an ion-list
- User wishes to save this data as a CSV, thereofre clicks the “Download to CSV” button
- App generates CSV file and saves it in the “Downloads” directory of the phone

I assumed this would be a reasonably common scenario, however I have been unable to find any sample code online. I’ve searched the Ionic forums and found a few people asking the same question for Ionic 1, but none of these had solid answers and it didn’t seem like anyone else has asked the question for Ionic 2.

I managed to write a javascript function to convert a JSON object to a CSV file, however this only works in my browser (Chrome) and not on my Android device.

Do I need to use Native plugins like the [File Plugin](http://ionicframework.com/docs/v2/native/file/)? I’m finding the documentation there a bit ‘thin’ to follow.

Does anyone have a working example of the functionality I require?

---

<div class="post-metadata">

**Author:** ![basti](https://avatars.discourse-cdn.com/v4/letter/b/fbc32d/32.png) [@basti](https://forum.ionicframework.com/u/basti)\
**Post date:** [March 14, 2017, 6:59pm UTC](https://forum.ionicframework.com/t/generate-download-a-csv-file-with-ionic/63104/2 "2017-03-14T18:59:41Z")

</div>

Do you have any news here?

---

<div class="post-metadata">

**Author:** ![UrbanCondor](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/urbancondor/32/103029_2.png) [@UrbanCondor](https://forum.ionicframework.com/u/UrbanCondor)\
**Post date:** [March 15, 2017, 2:00am UTC](https://forum.ionicframework.com/t/generate-download-a-csv-file-with-ionic/63104/3 "2017-03-15T02:00:03Z")

</div>

Unfortunately not, I ended up abandoning the idea as I didn’t receive any response from the community and I couldn’t solve the problem myself. I would still love to know the answer 🙂

---

<div class="post-metadata">

**Author:** ![basti](https://avatars.discourse-cdn.com/v4/letter/b/fbc32d/32.png) [@basti](https://forum.ionicframework.com/u/basti)\
**Post date:** [March 16, 2017, 9:53pm UTC](https://forum.ionicframework.com/t/generate-download-a-csv-file-with-ionic/63104/4 "2017-03-16T21:53:04Z")

</div>

I managed it working with this (imported the File-plugin before):

```
saveAsCsv() {
    var csv: any = this.convertToCSV(this.team.teams)

    var fileName: any = "team.csv"
    File.writeFile(File.externalRootDirectory, fileName, csv, true)
      .then(
      _ => {
        alert('Success ;-)')
      }
      )
      .catch(
      err => {

           File.writeExistingFile(File.externalRootDirectory, fileName, csv)
          .then(
          _ => {
        alert('Success ;-)')
          }
          )
          .catch(
          err => {
            alert('Failure')
          }
          )
      }
      )

  }

  convertToCSV(teams) {
    var csv: any = ''
    var line: any = ''

    var SpT = teams[0].length
    var anzahlTeams = teams.length

    //Header
    for (var i = 0; i < anzahlTeams; i++) {
      if (line != '') line += ';'
      line += "Team " + (i + 1)
    }
    csv += line + '\r\n';

    //Teams
    for (var i = 0; i < SpT; i++) {
      line = ''
      for (var j = 0; j < anzahlTeams; j++) {
        if (line != '') line += ';'
        
        line += teams[j][i]
        
      }
      csv += line + '\r\n'
    }

    return csv
  }

```

Hope this helps you 😉

---

<div class="post-metadata">

**Author:** ![Nikhil94dhar](https://avatars.discourse-cdn.com/v4/letter/n/b487fb/32.png) [@Nikhil94dhar](https://forum.ionicframework.com/u/Nikhil94dhar)\
**Post date:** [August 28, 2017, 12:09pm UTC](https://forum.ionicframework.com/t/generate-download-a-csv-file-with-ionic/63104/5 "2017-08-28T12:09:46Z")

</div>

working fine but its not showing any download notification how come any one know where to look for file …

---

<div class="post-metadata">

**Author:** ![Nikhil94dhar](https://avatars.discourse-cdn.com/v4/letter/n/b487fb/32.png) [@Nikhil94dhar](https://forum.ionicframework.com/u/Nikhil94dhar)\
**Post date:** [October 5, 2017, 10:28am UTC](https://forum.ionicframework.com/t/generate-download-a-csv-file-with-ionic/63104/6 "2017-10-05T10:28:30Z")

</div>

```auto
 convertToCSV(teams) {
    var csv: any = ''
    var line: any = ''

    var SpT = teams[0].length
    var anzahlTeams = teams.length

    //Header
    for (var i = 0; i < anzahlTeams; i++) {
      if (line != '') line += ';'
      line += "Team " + (i + 1)
    }
    csv += line + '\r\n';

    //Teams
    for (var i = 0; i < SpT; i++) {
      line = ''
      for (var j = 0; j < anzahlTeams; j++) {
        if (line != '') line += ';'
        
        line += teams[j][i]
        
      }
      csv += line + '\r\n'
    }

    return csv
  }

```

Do you have something like above for pdf ?

---

<div class="post-metadata">

**Author:** ![saimon](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/saimon/32/133587_2.png) [@saimon](https://forum.ionicframework.com/u/saimon)\
**Post date:** [October 5, 2017, 11:56am UTC](https://forum.ionicframework.com/t/generate-download-a-csv-file-with-ionic/63104/7 "2017-10-05T11:56:08Z")

</div>

Just recently I created a full tutorial on [How to Parse, Visualise and Export CSV Data with Ionic](https://devdactic.com/csv-data-ionic/), perhaps this helps and shows a concept to transform the data!

---

<div class="post-metadata">

**Author:** ![basti](https://avatars.discourse-cdn.com/v4/letter/b/fbc32d/32.png) [@basti](https://forum.ionicframework.com/u/basti)\
**Post date:** [October 19, 2017, 3:04pm UTC](https://forum.ionicframework.com/t/generate-download-a-csv-file-with-ionic/63104/8 "2017-10-19T15:04:39Z")

</div>

Thanks for the tutorial! It works fine with the local file.  
In the next step I wanted to fetch a local file from the android system with the filechooser plugin. I’m getting the uri from the file-chooser plugin, which I load instead of the local file path of the tutorial. Unfortunately the script throws an error when loading the file.

`{_body: "", status: 404, ok: false, statusText: "Not Found", headers: Headers…}`

This seems to come from a cross origin problem. I also tried to get the file with the file-plugin via the readAs…() commands, but had no luck so far.

Can anyone give me a hint how to open an external file? Thanks!

---

<div class="post-metadata">

**Author:** ![Tommertom](https://avatars.discourse-cdn.com/v4/letter/t/ed8c4c/32.png) [@Tommertom](https://forum.ionicframework.com/u/Tommertom)\
**Post date:** [October 19, 2017, 7:07pm UTC](https://forum.ionicframework.com/t/generate-download-a-csv-file-with-ionic/63104/9 "2017-10-19T19:07:06Z")

</div>

Thx for sharing,

as of new native coding convention, you need to add file to the constructor and then use code like below. Next, the externalRootDirectory is android only, so I replaced with dataDirectory.

Got this working on Android. Won’t work on Ionic View Pro (file plugin not supported).

Next adventure for me: find the file and put it in a socialshare (or email composer).

```auto
saveFile(body) {
    let fileName = "team.csv"
    this.file.writeFile(this.file.dataDirectory, fileName, body, true)
      .then(
      _ => {
        alert('Success ;-)'+this.file.dataDirectory)
      }
      )
      .catch(
      err => {

        this.file.writeExistingFile(this.file.dataDirectory, fileName, body)
          .then(
          _ => {
            alert('Success ;-)2'+this.file.dataDirectory)
          }
          )
          .catch(
          err => {
            alert(err+'Failure'+this.file.dataDirectory)
          }
          )
      }
      )
  }

```

Regards

Tom

---

<div class="post-metadata">

**Author:** ![Sagaidak](https://avatars.discourse-cdn.com/v4/letter/s/eada6e/32.png) [@Sagaidak](https://forum.ionicframework.com/u/Sagaidak)\
**Post date:** [July 10, 2018, 10:46am UTC](https://forum.ionicframework.com/t/generate-download-a-csv-file-with-ionic/63104/10 "2018-07-10T10:46:27Z")

</div>

Hey there! Did you manage to put it on social sharing plugin?

---

<div class="post-metadata">

**Author:** ![Tommertom](https://avatars.discourse-cdn.com/v4/letter/t/ed8c4c/32.png) [@Tommertom](https://forum.ionicframework.com/u/Tommertom)\
**Post date:** [July 10, 2018, 11:02am UTC](https://forum.ionicframework.com/t/generate-download-a-csv-file-with-ionic/63104/11 "2018-07-10T11:02:41Z")

</div>

```auto
this.file.writeFile(this.file.dataDirectory, 'export.csv', text, { replace: true })
      .then((stuff) => {
        if (stuff != null) {
          this.socialshare.share('CSV file export', 'CSV export', stuff['nativeURL'], '');
        } else return Promise.reject('write file')
      })

```

---

<div class="post-metadata">

**Author:** ![Sagaidak](https://avatars.discourse-cdn.com/v4/letter/s/eada6e/32.png) [@Sagaidak](https://forum.ionicframework.com/u/Sagaidak)\
**Post date:** [July 10, 2018, 11:14am UTC](https://forum.ionicframework.com/t/generate-download-a-csv-file-with-ionic/63104/12 "2018-07-10T11:14:25Z")

</div>

Did you try to email it? I can see it shared only Subject and Title for me. No file in attachments.

Also do you convert txt to blob or smth before writing it to file?

---

<div class="post-metadata">

**Author:** ![Tommertom](https://avatars.discourse-cdn.com/v4/letter/t/ed8c4c/32.png) [@Tommertom](https://forum.ionicframework.com/u/Tommertom)\
**Post date:** [July 10, 2018, 1:12pm UTC](https://forum.ionicframework.com/t/generate-download-a-csv-file-with-ionic/63104/13 "2018-07-10T13:12:59Z")

</div>

hi

text is of type string, so no blobbing.

Not sure what goes wrong in your code

and frankly, it has been a while since I used it

But what I remember is that it worked

Sorry

Tom

---

<div class="post-metadata">

**Author:** ![Sagaidak](https://avatars.discourse-cdn.com/v4/letter/s/eada6e/32.png) [@Sagaidak](https://forum.ionicframework.com/u/Sagaidak)\
**Post date:** [July 10, 2018, 1:54pm UTC](https://forum.ionicframework.com/t/generate-download-a-csv-file-with-ionic/63104/14 "2018-07-10T13:54:48Z")

</div>

Was freaking out until i undestood that the ‘filename’ shouldn’t contain any spaces to share correctly. Thanks for your help!

---

<div class="post-metadata">

**Author:** ![layaln](https://avatars.discourse-cdn.com/v4/letter/l/848f3c/32.png) [@layaln](https://forum.ionicframework.com/u/layaln)\
**Post date:** [October 12, 2020, 10:41am UTC](https://forum.ionicframework.com/t/generate-download-a-csv-file-with-ionic/63104/15 "2020-10-12T10:41:44Z")

</div>

Hi  
I need some help, I want to separate columns in CSV exported data and deal with each column  
is that possible??

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 8:51pm UTC](https://forum.ionicframework.com/t/generate-download-a-csv-file-with-ionic/63104/18 "2021-07-19T20:51:44Z")

</div>