vue-blob-json-csv
Advanced tools
[](https://npmjs.com/package/vue-blob-json-csv) [](https://www.npmjs.com/package/vu
Component library to download a JSON or CSV file using Vue.
$ yarn add vue-blob-json-csv
# or
$ npm i --save vue-blob-json-csv
import Vue from "vue";
import VueBlobJsonCsv from 'vue-blob-json-csv';
Vue.use(VueBlobJsonCsv)
<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>
<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>
<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>
<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>
| 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 |
| Event | Description |
|---|---|
success | Event after download is complete |
error | Error |
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
MIT
FAQs
[](https://npmjs.com/package/vue-blob-json-csv) [](https://www.npmjs.com/package/vu
The npm package vue-blob-json-csv receives a total of 144 weekly downloads. As such, vue-blob-json-csv popularity was classified as not popular.
We found that vue-blob-json-csv demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Popular npm packages like eslint-config-prettier were compromised after a phishing attack stole a maintainer’s token, spreading malicious updates.
Security News
/Research
A phishing attack targeted developers using a typosquatted npm domain (npnjs.com) to steal credentials via fake login pages - watch out for similar scams.
Security News
Knip hits 500 releases with v5.62.0, refining TypeScript config detection and updating plugins as monthly npm downloads approach 12M.