PhouvanhKCSV / vue-json-excel

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

FIX

[02-01-2018] Thanks to @gucastiliao for json nested support, @ryatziv for the multiples fixes, @DrLongGhost for CSV data escaping, @davodaslanifakor for key header fix [11-18-2017] Thanks to @msonowal now you can export to CSV, just add the prop: type="csv" [03-08-2017] downloaded file works with Microsoft Office

✔ Getting started

Get the package:

npm install vue-json-excel

Register JsonExcel in your app entrypoint:

import Vue from 'vue'
import JsonExcel from 'vue-json-excel';

Vue.component('downloadExcel', JsonExcel);

const app = new Vue({
	el: '#app',
	data: {
		json_fields : {
	    "Complete name" : "name",
	    "City" : "city",
	    "Telephone" : "phone.landline",
		},
		json_data : [
	    {
        "name"      : "Tony Peña",
        "city"      : "New York",
        "country"   : "United States",
        "birthdate" : "1978-03-15",
        "phone" : {
					"mobile" : "1-541-754-3010"
					"landline" : "[phone]"
				}
	    },
	    {
        "name"      : "Thessaloniki",
        "city"      : "Athens",
        "country"   : "Greece",
        "birthdate" : "1987-11-23",
        "phone" : {
					"mobile" : "[phone]"
					"landline" : "(2741) 2621-244"
				}
	    }
		],
		json_meta: [
			[{
				"key": "charset",
				"value": "utf-8"
			}]
		],

In your HTML call it like

<download-excel
	class   = "btn btn-default"
	:data   = "json_data"
	:fields = "json_fields"
	name    = "filename.xls">

	Download Excel (you can customize this with html code!)

</download-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.

OPTIONAL

• type: xls o csv, xls is the default value.
• name: filename of the document you donwload.
• title: Add a title above the datagrid

Export CSV

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

<download-excel
	class   = "btn btn-default"
	:data   = "json_data"
	:fields = "json_fields"
	type    = "csv"
	name    = "filename.xls">

	Download Excel (you can customize this with html code!)

</download-excel>

License

MIT

Status

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