Vue Export Json Excel

Componente de vuejs para exportar json a excel con opciónes personalizadas.

Getting started

Get the package:

npm install export-json-excel

Register export-json-excel in your app entrypoint:

import Vue from "vue";
import "export-json-excel";

In your template

<export-json-excel
    :data="exportData">
    Download Data
    <img src="download_icon.png">
</export-json-excel>

Props List

| Nombre | Tipo | Descripción | | :--- | :---: | --- | | data | Array | datos que serán exportados | | fields | Array | listado de objetos que forman la cabecera todos los objetos que se definana aquí serán mostrarán en el excel | | name | string | nombre del archivo a exportar deault: data.xlsx | | worksheet | string | Nombre de la hoja de trabajo. default: 'Sheet1' | | beforeExport | Function | Función que se ejecuta antes de descargar el fichero | | afterExport | Function | Función que se ejecuta despues de descarga del fichero |

Example

import Vue from "vue";
import "export-json-excel";

const app = new Vue({
    el: '#app',
    data: {
        fields: [
            {
              'title': '#',
              'name': 'id', 
            },
            {
              'title': 'Nombre',
              'name': 'name', 
            },
            {
              'title': 'Ciudad',
              'name': 'city', 
            },
            {
              'title': 'País',
              'name': 'country', 
            },
            {
              'title': 'birthdate',
              'name': 'F. Nacimiento',
              'type': 'Date',
              'format': 'DD/MM/YYYY'
            }
        ]
        data: [
            {
                'id': 1,
                'name': 'Tony Peña',
                'city': 'New York',
                'country': 'United States',
                'birthdate': '1978-03-15'
            },
            {
                'id': 2,
                'name': 'Thessaloniki',
                'city': 'Athens',
                'country': 'Greece',
                'birthdate': '1987-11-23'
            },
            {
                'id': 3,
                'name': 'Jhon Doe',
                'city': 'Mexico',
                'country': 'Mexico',
                'birthdate': '1987-11-23'
            }
        ]
    },
    methods:{
      startDownload(){
          console.log('show loading');
      },
      finishDownload(){
          console.log('hide loading');
      }
    }
})

In your HTML call it like

<export-json-excel
	:data="data"
	:fields="fields"
	worksheet="My Worksheet"
	name="filename"
  :beforeExport="startDownload"
  :afterExport="finishDownload">
    Descargar excel (tu puedes cambiar este código por el que quieras)

</export-json-excel>

Requerido

• data: Contiene los datos que quieres exportar,
• fields: Contiene las cabeceras de las columnas.