Export JSON Into CSV File – vue-json-csv

A VueJS component to export JSON Data into a CSV file and download the resulting file.

How to use it:

1. Import and register the component.

import Vue from 'vue'
import JsonCSV from 'vue-json-csv'
Vue.component('downloadCsv', JsonCSV)

2. Add a download button to your app.

<download-csv
  :data="json_data">
  Download Data
</download-csv>

3. Define your JSON data as follows:

const app = new Vue({
  el: '#app',
  data: {     
    json_data: [
      {
        "id": 1,
        "fname": "Jesse",
        "lname": "Simmons",
        "date": "2016-10-15 13:43:27",
        "gender": "Male"
      },
      {
        "id": 2,
        "fname": "John",
        "lname": "Jacobs",
        "date": "2016-12-15 06:00:53",
        "gender": "Male"
      },
      {
        "id": 3,
        "fname": "Tina",
        "lname": "Gilbert",
        "date": "2016-04-26 06:26:28",
        "gender": "Female"
      },
      {
        "id": 4,
        "fname": "Clarence",
        "lname": "Flores",
        "date": "2016-04-10 10:28:46",
        "gender": "Male"
      },
      {
        "id": 5,
        "fname": "Anne",
        "lname": "Lee",
        "date": "2016-12-06 14:38:38",
        "gender": "Female"
      },
      {
        "id": 6,
        "fname": "佟博",
        "lname": "能娜",
        "date": "2016-12-06 14:38:38",
        "gender": "Male"
      },
      {
        "id": 7,
        "fname": "Širůčková",
        "lname": "Tereza",
        "date": "2019-12-06 14:38:38",
        "gender": "Female"
      }
    ]
  }
})

4. Available props.

/**
 * Json to download
 */
data: {
  type: Array,
  required: true
},
/**
 * fields inside the Json Object that you want to export
 * if no given, all the properties in the Json are exported
 * Can either be an array or a function
 */
fields: {
  type: [Array, Function],
  required: false
},
/**
 * filename to export, default: data.csv
 */
name: {
  type: String,
  default: "data.csv"
},
/**
 * Delimiter for the CSV file
 */
delimiter: {
  type: String,
  default: ",",
  required: false
},
/**
 * Should the module add SEP={delimiter}
 *
 * Useful for opening file with Excel
 */
separatorExcel: {
  type: Boolean,
  default: false
},
/**
 * What will be the encoding of the file
 */
encoding: {
  type: String,
  default: "utf-8"
},
/**
 * Advanced options for Papaparse that is used to export to CSV
 */
advancedOptions: {
  type: Object,
  default: () => {
  }
},
/**
 * Labels for columns
 *
 * Object or function
 */
labels: {
  type: [Object, Function],
  required: false
},
/**
 * Used only for testing purposes
 */
testing: {
  required: false,
  default: false
}

Preview:

Changelog:

v3.1.0 (03/27/2022)

• mime: set the proper mime to the file
• TypeScript: Add support for typescript
• TypeScript: Use typescript under the hood

Download Details:

Author: Belphemur

Live Demo: https://belphemur.github.io/vue-json-csv/

Download Link: https://github.com/Belphemur/vue-json-csv/archive/develop.zip

Official Website: https://github.com/Belphemur/vue-json-csv

Install & Download:

# Yarn
$ yarn add vue-json-csv

# NPM
$ npm install vue-json-csv --save