https://github.com/mikemenaker/v-download

Vue.js directive to download (and optionally transform) data
https://github.com/mikemenaker/v-download

csv directive json vue-directive vuejs

Last synced: 2 months ago
JSON representation

Vue.js directive to download (and optionally transform) data

• Host: GitHub
• URL: https://github.com/mikemenaker/v-download
• Owner: mikemenaker
• License: mit
• Created: 2018-02-12T20:48:24.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T17:19:16.000Z (about 2 years ago)
• Last Synced: 2024-10-31T17:59:01.459Z (3 months ago)
• Topics: csv, directive, json, vue-directive, vuejs
• Language: JavaScript
• Size: 1.23 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# v-download

Vue.js directive to download (and optionally transform) data

#### Install

For browser usage, import the component by adding a src tag in the header ():

``

For Node usage, install the v-download package using npm

`npm install --save v-download`

## Usage

First register the directive globally:

```js

import DownloadData from 'v-download'

Vue.use(DownloadData)

```

Or locally:

```js

import { downloadData } from 'v-download'

export default {

  directives: {

    downloadData

  }

}

```

Then use it in template:

```vue

<template>

  <button v-download-data="`some text`">Download!</button>

</template>

```

## Data type

If type is provided it will be used as the mimetype:

```vue

<template>

  <button v-download-data="`{'example':'some text'}`" v-download-data:type="'json'">Download!</button>

</template>

```

If an object or array (instead of a string) is provided and the type is 'csv', 'tsv' or 'json', the object/array will be converted (json will be convert using JSON.stringify, csv/tsv is assuming an array and will be iterated)

```vue

<template>

  <button v-download-data="myObject" v-download-data:type="'json'">Download!</button>

</template>

```

## File name

If filename is provided it will be used as the downloaded file name:

```vue

<template>

  <button v-download-data="`{'example':'some text'}`" v-download-data:filename="'mydownload.json'">Download!</button>

</template>

```