JSON to Excel for VUE 2

Download your JSON data as an excel file directly from the browser. This component it's based on the solution proposed on this thread https://stackoverflow.com/questions/17142427/javascript-to-export-html-table-to-excel

Important! Extra prompt in Microsoft Excel

The method implemented in this component use HTML tables to draw the .xls files, Microsoft Excel no longer recognize HTML as native content so will prompt a warning message before open the file. The content will be rendered perfectly but the message can't be avoid.

Getting started

Get the package:

1npm install vue-excel-export

Register excel in your app entrypoint:

1import Vue from 'vue'
2import excel from 'vue-excel-export'
3
4Vue.use(excel)

In your template

1<export-excel
2    :data   = "json_data">
3    Download Data
4    <img src="download_icon.png">
5</export-excel>

Props List

Name	Type	Description
data	Array	Data to be exported
fields	Object	fields inside the Json Object that you want to export. If no given, all the properties in the Json are exported
export-fields (exportFields)	Object	this prop is used to fix the problem with other components that use the variable fields, like vee-validate. exportFields works exactly like fields
type	string	mime type [xls, csv], default: xls
name	string	filename to export, deault: data.xls
title	string/Array	Title(s) for the data, could be a string or an array of strings (multiple titles)
footer	string/Array	Footer(s) for the data, could be a string or an array of strings (multiple footers)
default-value (defaultValue)	string	Use as fallback when the row has no field values, default: ''
worksheet	string	Name of the worksheet tab. default: 'Sheet1'
fetch	Function	Callback to fetch data before download, if it's set it runs immediately after mouse pressed and before download process. IMPORTANT: only works if no data prop is defined
before-generate	Function	Callback to call a method right before the generate / fetch data, eg:show loading progress
before-finish	Function	Callback to call a method right before the download box pops out, eg:hide loading progress

Example

1import Vue from 'vue'
2import excel from 'vue-excel-export'
3
4Vue.use(excel)
5
6const app = new Vue({
7    el: '#app',
8    data: {
9        json_fields: {
10            'Complete name': 'name',
11            'City': 'city',
12            'Telephone': 'phone.mobile',
13            'Telephone 2' : {
14                field: 'phone.landline',
15                callback: (value) => {
16                    return `Landline Phone - ${value}`;
17                }
18            },
19        },
20        json_data: [
21            {
22                'name': 'Tony Peña',
23                'city': 'New York',
24                'country': 'United States',
25                'birthdate': '1978-03-15',
26                'phone': {
27                    'mobile': '1-541-754-3010',
28                    'landline': '(541) 754-3010'
29                }
30            },
31            {
32                'name': 'Thessaloniki',
33                'city': 'Athens',
34                'country': 'Greece',
35                'birthdate': '1987-11-23',
36                'phone': {
37                    'mobile': '+1 855 275 5071',
38                    'landline': '(2741) 2621-244'
39                }
40            }
41        ],
42        json_meta: [
43            [
44                {
45                    'key': 'charset',
46                    'value': 'utf-8'
47                }
48            ]
49        ],
50    }
51})

In your HTML call it like

1<export-excel
2	class   = "btn btn-default"
3	:data   = "json_data"
4	:fields = "json_fields"
5	worksheet = "My Worksheet"
6	name    = "filename.xls">
7
8	Download Excel (you can customize this with html code!)
9
10</export-excel>

REQUIRED

• json_data: Contains the data you want to export,
• json_fields: You can select what fields to export, especify nested data and assign labels to the fields the key is the label, the value is the JSON field. This will export the field data 'as is'. If you need to customize the the exported data you can define a callback function. Thanks to @gucastiliao.

1let json_fields = {
2    // regular field (exported data 'as is')
3    fieldLabel: attributeName, // nested attribute supported
4    // callback function for data formatting
5    anotherFieldLabel: {
6        field: anotherAttributeName, // nested attribute supported
7        callback: (value) => {
8            return `formatted value ${value}`
9        }
10    },
11}

Export CSV

To export JSON to CSV file just add the prop type with value "csv":

1<export-excel
2	class   = "btn btn-default"
3	:data   = "json_data"
4	:fields = "json_fields"
5	type    = "csv"
6	name    = "filename.xls">
7
8	Download Excel (you can customize this with html code!)
9
10</export-excel>

License

MIT

Status

This project is in an early stage of development. Any contribution is welcome :D