How to create a csv file with vue.js

Question

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>

Barre Mathis · Accepted Answer · 2022-07-07 13:24:24Z

4

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

answered Jul 7, 2022 at 13:24

Barre Mathis

822 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tauzN · Accepted Answer · 2022-07-06 20:10:33Z

1

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

answered Jul 6, 2022 at 20:10

tauzN

7,4872 gold badges22 silver badges23 bronze badges

Comments

Leonardo Wildt · Accepted Answer · 2022-07-06 20:16:13Z

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');

Collectives™ on Stack Overflow

How to create a csv file with vue.js

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related