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

vue-json-to-csv

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-json-to-csv

A Vue.js 2 component to transform and download a json in csv format

  • 1.1.8
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

vue-json-to-csv

A Vue.js 2 component to transform and download a json in csv format https://angeliquekom.github.io/vue-json-to-csv.github.io/

Installation

npm install --save vue-json-to-csv or use dist/vue-json-to-csv.min.js

Demo

Demo

Usage

For vue-cli user:

import VueJsonToCsv from 'vue-json-to-csv'

For standalone usage:

<script src="vue.min.js"></script>
<!-- must place this line after vue.js -->
<script src="dist/vue-json-to-csv.min.js"></script>
<script type="text/javascript">
  Vue.use(VueJsonToCsv);
</script>

Sample 1 (simple use)

Simple usage: will generate a default button. The csv will include all the labels (name, surname) and the data

<vue-json-to-csv :json-data="[
    { name: 'Joe', surname: 'Roe' },
    { name: 'John', surname: 'Doe' }
  ]">
</vue-json-to-csv>
Result csv

csv.csv

namesurname
JoeRoe
JohnDoe

Sample 2 (filter labels)

Selected labels with custom csv title: will generate a custom button as defined at the slot. The csv will include only the "name" label with the "First name" title and the relevant data.

<vue-json-to-csv :json-data="[
    { name: 'Joe', surname: 'Roe' },
    { name: 'John', surname: 'Doe' }
  ]"
  :labels="{ name: { title: 'First name' } }"
  :csv-title="My_CSV"
  >
  <button>
    <b>My custom button</b>
  </button>
</vue-json-to-csv>
Result csv

My_CSV.csv

First name
Joe
John

Sample 3 (handle success/error, custom button, configure labels)

Handle success/error with custom button, returns specific labels with custom title: use of custom methods on success or error.

<vue-json-to-csv :json-data="[
    { name: 'John', surname: 'Doe', age: 20, salary: 20.000, hours: 37.4 },
    { name: 'John', surname: 'Roe', age: 40, salary: 40.000, hours: 35.2 },
    { name: 'Jane', surname: 'Woe', age: 50, salary: 52.000, hours: 30.4 }
  ]"
  :labels="{
    name: { title: 'First name' },
    salary: { title: 'Annual salary' },
    hours: { title: 'Hours/week' }
  }"
  @success="val => handleSuccess(val)"
  @error="val => handleError(val)">
  <button>
    <b>My custom button</b>
  </button>
</vue-json-to-csv>

Configuration

PropDetails
json-dataArray of the objects which contain the data to display (required). Each key will be a different column at the csv. All the objects should contain the same keys. If empty array an error will be returned. Example: [ { name: 'Joe', surname: 'Roe' }, { name: 'Joe', surname: 'Doe' }]
show-labelsBoolean. If false the first row of the csv will not contain the labels names.
labelsAn object of the keys of the labels will be displayed. Use to filter the keys to display and modify their label title. For each key we provide the title of the key to displayed. If not defined all the keys will be parsed. Example: { name: { title: 'First name' } }
csv-titleString. The title of the generated csv. Default: 'csv'
separatorString. The separator of the columns. Default: ','
@update:errorWill be triggered in case of an empty json array, if the labels object has not children or any parsing issue
@update:successWill be triggered in case of a successful csv creation

FAQs

Package last updated on 13 Jul 2019

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