Component library to download a JSON or CSV file using Vue

by Vue.js Examples

vue-blob-json-csv

Component library to download a JSON or CSV file using Vue.

View Demo View Github

Installation

  • NPM / Yarn
$ yarn add vue-blob-json-csv
# or
$ npm i --save vue-blob-json-csv
  • Modules
import Vue from "vue";
import VueBlobJsonCsv from 'vue-blob-json-csv';

Vue.use(VueBlobJsonCsv)
  • CDN
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./dist/VueBlobJsonCsv.umd.min.js"></script>
<script>
  Vue.use(VueBlobJsonCsv.default);
  new Vue({
    el: "#app"
  })
</script>

Usage

Module

<template>
  <vue-blob-json-csv
    @success="handleSuccess"
    @error="handleError"
    tag-name="div"
    file-type="json"
    file-name="sample"
    title="Download JSON"
    :data="data"
    confirm="Do you want to download it?"
  >
</template>
  • Use Slot
<template>
  <vue-blob-json-csv
    @success="handleSuccess"
    @error="handleError"
    file-type="json"
    file-name="sample"
    :data="data"
  >
    <h2>Title</h2>
    <p>csv download</p>
  </vue-blob-json-csv>
</template>

CDN

<body>
  <div id="app">
    <p>{{msg}}</p>
    <button @click="sayHello">Hi!</button>
    <vue-blob-json-csv
      file-type="json"
      file-name="todos"
      data="[
              {
                userId: 1,
                id: 1,
                title: 'delectus aut autem',
                completed: false
              },
              {
                userId: 1,
                id: 2,
                title: 'quis ut nam facilis et officia qui',
                completed: false
              },
              {
                userId: 1,
                id: 3,
                title: 'fugiat veniam minus',
                completed: false
              }
            ]"
    >
      Download JSON
    </vue-blob-json-csv>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-blob-json-csv@latest/dist/VueBlobJsonCsv.umd.min.js"></script>
  <script>
    Vue.use(VueBlobJsonCsv.default);
    new Vue({
      el: "#app"
    })
  </script>
</body>

Props

Prop Data Type Required Default Description
tagName String false span Element Tag Name
title String false Button title name
fileType String true csv File extension (csv or json)
fileName String false data File name
data Array true Data you want to export
fields Array false Export only specific keys
confirm String false Text to display in the dialog

Events

Event Description
success Event after download is complete
error Error

Contributing

Welcome to improve vue-blob-json-csv with any issue, pull request or code review.

# Setup
$ cd vue-blob-json-csv
$ yarn

# dev-server
$ yarn serve

# Build
$ yarn build:lib

# Unit Testing
$ yarn test:unit

# Lint
$ yarn lint
# Lint - fix
$ yarn lint --fix

GitHub