I want to create a csv file with the plugin 'csv-writer' in a vuejs file. I took the example code of the plugin and made it works with .js file.

Now, I want to adapt the code so that it works in my vue.js file the thing is that I don't get what's the equivalent of

const createCsvWriter = require('csv-writer').createObjectCsvWriter;

here is the example :

const createCsvWriter = require('csv-writer').createObjectCsvWriter;
const csvWriter = createCsvWriter({
    path: 'file.csv',
    header: [
        {id: 'name', title: 'NAME'},
        {id: 'lang', title: 'LANGUAGE'}
    ]
});
 
const records = [
    {name: 'Bob',  lang: 'French, English'},
    {name: 'Mary', lang: 'English'}
];
 
csvWriter.writeRecords(records)       // returns a promise
    .then(() => {
        console.log('...Done');
    });

What I tried in my vue.js file :

<template>
    <div>
      <v-btn text @click.prevent="exportData()">
            Export CSV
        </v-btn>
   </div>
</template>


<script>

import createCsvWriter from 'csv-writer'

    export default {
        data () {
            return {
                csvWriter : createCsvWriter({
                     path: 'file.csv',
                        header: [
                            {id: 'name', title: 'NAME'},
                            {id: 'lang', title: 'LANGUAGE'}
                      ]  
                }),
                records : [
                    {name: 'Bob',  lang: 'French, English'},
                    {name: 'Mary', lang: 'English'}
                ],
            }
        },
        methods: {
            
            async exportData(){
                this.csvWriter.writeRecords(this.records);      // returns a promise
                console.log('...Done');
               
               },
        }
    }
</script>

I want to create a csv file with the plugin 'csv-writer' in a vuejs file. I took the example code of the plugin and made it works with .js file.

Now, I want to adapt the code so that it works in my vue.js file the thing is that I don't get what's the equivalent of

const createCsvWriter = require('csv-writer').createObjectCsvWriter;

here is the example :

const createCsvWriter = require('csv-writer').createObjectCsvWriter;
const csvWriter = createCsvWriter({
    path: 'file.csv',
    header: [
        {id: 'name', title: 'NAME'},
        {id: 'lang', title: 'LANGUAGE'}
    ]
});
 
const records = [
    {name: 'Bob',  lang: 'French, English'},
    {name: 'Mary', lang: 'English'}
];
 
csvWriter.writeRecords(records)       // returns a promise
    .then(() => {
        console.log('...Done');
    });

What I tried in my vue.js file :

<template>
    <div>
      <v-btn text @click.prevent="exportData()">
            Export CSV
        </v-btn>
   </div>
</template>


<script>

import createCsvWriter from 'csv-writer'

    export default {
        data () {
            return {
                csvWriter : createCsvWriter({
                     path: 'file.csv',
                        header: [
                            {id: 'name', title: 'NAME'},
                            {id: 'lang', title: 'LANGUAGE'}
                      ]  
                }),
                records : [
                    {name: 'Bob',  lang: 'French, English'},
                    {name: 'Mary', lang: 'English'}
                ],
            }
        },
        methods: {
            
            async exportData(){
                this.csvWriter.writeRecords(this.records);      // returns a promise
                console.log('...Done');
               
               },
        }
    }
</script>

• javascript
• vue.js
• csv
• require

3 Answers 3

I chose a vue plugin named vue-json-to-csv to achieve it =)

csv-writer is for node.js, not client-side JavaScript.

Something like this ought to work.

    var data = [
      ['name1', 'city1', 'some other info'],
      ['name2', 'city2', 'more info']
    ];

    // Building the CSV from the Data two-dimensional array
    // Each column is separated by ";" and new line "\n" for next row
    var csvContent = '';
    data.forEach(function(infoArray, index) {
      dataString = infoArray.join(';');
      csvContent += index < data.length ? dataString + '\n' : dataString;
    });

    // The download function takes a CSV string, the filename and mimeType as parameters
    // Scroll/look down at the bottom of this snippet to see how download is called
    var download = function(content, fileName, mimeType) {
      var a = document.createElement('a');
      mimeType = mimeType || 'application/octet-stream';

      if (navigator.msSaveBlob) { // IE10
        navigator.msSaveBlob(new Blob([content], {
          type: mimeType
        }), fileName);
      } else if (URL && 'download' in a) { //html5 A[download]
        a.href = URL.createObjectURL(new Blob([content], {
          type: mimeType
        }));
        a.setAttribute('download', fileName);
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      } else {
        location.href = 'data:application/octet-stream,' + encodeURIComponent(content); // only this mime type is supported
      }
    }

    download(csvContent, 'dowload.csv', 'text/csv;encoding:utf-8');