vue-blob-json-csv

vue-blob-json-csv

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

Demo

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">
    <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

Events

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

License

MIT