vue-blob-json-csv
v0.1.7
Published
[](https://npmjs.com/package/vue-blob-json-csv) [](https://www.npmjs.com/package/vu
Downloads
759
Readme
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 --fixLicense
MIT