Download JSON Or CSV File Using Vue – blob-json-csv

blob-json-csv is a component library that enables the user to download JSON or CSV files directly on the app.

How to use it:

1. Import the blob-json-csv component after Vue.

import Vue from "vue";
import VueBlobJsonCsv from 'vue-blob-json-csv';

2. Register the component.

Vue.use(VueBlobJsonCsv)

3. Add the blob-json-csv component to the template and determine which file to download.

<vue-blob-json-csv
  tag-name="div"
  file-type="json" // or 'csv'
  file-name="sample"
  title="Download"
  :data="data"
>

4. Show a confirm dialog before downloading.

<vue-blob-json-csv
  tag-name="div"
  file-type="json"
  file-name="sample"
  title="Download"
  :data="data"
  confirm="Do you want to download it?"
>

5. Event hanlders.

<vue-blob-json-csv
  @success="handleSuccess"
  @error="handleError"
  tag-name="div"
  file-type="json"
  file-name="sample"
  title="Download"
  :data="data"
  confirm="Do you want to download it?"
>

6. All default props.

tagName: {
  type: String,
  required: false,
  default: "span"
},
title: {
  type: String,
  required: false,
  default: ""
},
fileType: {
  type: String,
  required: true,
  default: ""
},
fileName: {
  type: String,
  required: false,
  default: "data"
},
data: {
  type: Array,
  required: true,
  default: () => []
},
fields: {
  type: Array,
  required: false,
  default: () => []
},
confirm: {
  type: String,
  required: false,
  default: null
}

Preview:

Download Details:

Author: dnrsm

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

Download Link: https://github.com/dnrsm/vue-blob-json-csv/archive/master.zip

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

Install & Download: