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
How can I modify the row format in .csv file?
I’ve used this for my project and it is working well but I have to modify the .csv file and there is no method.
EX: row color, text size , etc.
I want know how can I do it. Thanks