❤
npm
Sign UpSign In

vue-blob-json-csv
TypeScript icon, indicating that this package has built-in type declarations

0.1.7 • Public • Published

Latest Version on NPM Total Downloads on NPM Software License

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

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

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i vue-blob-json-csv

Repository

github.com/dnrsm/vue-blob-json-csv

Homepage

github.com/dnrsm/vue-blob-json-csv#readme

Weekly Downloads

194

Version

0.1.7

License

MIT

Unpacked Size

518 kB

Total Files

9

Last publish

Collaborators

  • dnrsm
Try on RunKit
Report malware