Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue-json-csv

Package Overview
Dependencies
Maintainers
1
Versions
19
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-json-csv

Download your JSON data as an CSV file directly from the browser

  • 2.1.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

Vue JSON to CSV file

FOSSA Status NodeJs

VueJS component to export Json Data into CSV file and download the resulting file.

Example

GitHub Pages

Getting started

Get the package:

yarn add vue-json-csv

Register JsonCSV in your app entrypoint:

import Vue from 'vue'
import JsonCSV from 'vue-json-csv'

Vue.component('downloadCsv', JsonCSV)

In your template

<download-csv
    :data   = "json_data">
    Download Data
    <img src="download_icon.png">
</download-csv>

Props List

NameTypeDescription
dataArray(required) Data to be exported
fieldsArray/Function(value, key)fields inside the Json Object that you want to export. If no given, all the properties in the Json are exported. Use the function to filter the data and only keep the properties you want.
labelsObject/Function(value, key)Set the label for the header row.
namestringfilename to export, default: data.csv
delimiterstringDefault ",". Can be changed to anything.
separator-excelbooleanIf true, will prepend SEP={delimiter} to the file to make it easily usable with Excel
encodingstringSet the wanted encoding, default to 'utf-8'
advancedOptionsObjectYou can set all the options of PapaParse yourself

Example

import Vue from 'vue'
import JsonCSV from 'vue-json-csv'

Vue.component('downloadCsv', JsonCSV)

const app = new Vue({
    el: '#app',
    data: {     
        json_data: [
            {
                'name': 'Tony Peña',
                'city': 'New York',
                'country': 'United States',
                'birthdate': '1978-03-15',
                'phone': {
                    'mobile': '1-541-754-3010',
                    'landline': '(541) 754-3010'
                }
            },
            {
                'name': 'Thessaloniki',
                'city': 'Athens',
                'country': 'Greece',
                'birthdate': '1987-11-23',
                'phone': {
                    'mobile': '+1 855 275 5071',
                    'landline': '(2741) 2621-244'
                }
            }
        ]
    }
})

In your Template call it like

<download-csv
	class   = "btn btn-default"
	:data   = "json_data"
	name    = "filename.csv">

	Download CSV (This is a slot)

</download-csv>

REQUIRED

  • json_data: Contains the data you want to export

License

MIT

FOSSA Status

Keywords

FAQs

Package last updated on 28 Mar 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc