vue-json-to-tsv v1.0.1

vue-json-to-tsv

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

Installation

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

Demo

Demo

Usage

For vue-cli user:

import VueJsonToTsv from 'vue-json-to-tsv';

For standalone usage:

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

Sample 1 (simple use)

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

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

Result tsv

tsv.tsv

Sample 2 (filter labels)

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

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

Result tsv

My_CSV.tsv

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-tsv
  :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-tsv>

Configuration