Code Monkey home page Code Monkey logo

vue-json-excel's Introduction

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 : {
		    "name"      : "String",
		    "city"      : "String",
		    "country"   : "String",
		    "birthdate" : "String",
		    "amount"    : "Number"
		},
		json_data : [
		    {
		        "name"      : "Tony Peña",
		        "city"      : "New York",
		        "country"   : "United States",
		        "birthdate" : "1978-03-15",
		        "amount"    : 42
		    },
		    {
		        "name"      : "Thessaloniki",
		        "city"      : "Athens",
		        "country"   : "Greece",
		        "birthdate" : "1987-11-23",
		        "amount"    : 42
		    }
		],
		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>

json_data contains the data you want to export, json_fields is a type mapping for the fields in the json, name is the file name.

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

vue-json-excel's People

Contributors

jecovier avatar msonowal avatar gonzaloalonsod avatar gustv000 avatar zhegwood avatar sunjiahui avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.