Vuejs Application JSON To Excel Generation

In this article, we will explore JSON data to excel file generation in the Vuejs application.

An Overview On vue-json-excel:

The technique to download your JSON data as an excel file directly from the browser. The following are key options for the excel vue component.

• data: The array of data to be exported.
• fields: Fields inside the JSON object that you want to export. If none provided, all properties in the JSON will be exported.
• type: Mime type[xls, csv].
• name: Filename to export.
• header: Title(s) for the data. Can be a string(one title) or an array of string (multiple titles).
• footer: Footer(s) for the data. Can be a string(one footer) or an array of strings(multiple footers).
• default-value: Use as a fallback when the row has no field values.
• worksheet: Name of the worksheet tab.
• fetch: Callback to fetch data before download if it's set it runs immediately function after mouse pressed and before the download process(Note: Only works if no data prop is defined).
• before-generate: Callback to call a method right before the generate/fetch data(eg: shows loading progress).
• before-finish: Callback to call a method right before the download box pops out(eg: hiding loading progress).

Unavoidable Excel Warning Popup:

The method implemented in this component uses HTML tables to draw the .xls files, Microsoft Excel no longer recognizes HTML as native content so a warning message will be displayed before opening the file. The content will be rendered perfectly but the message can't be avoided.

Create A VueJS Sample App:

Command To Install Vue CLI Globally On Your System:
npm run -g @vue/cli

Command To Create Vue App:
vue create your_application_name

After creating a sample application run the following command to start the application.

Command To Run Vue App:
npm run serve

Install vue-json-excel Npm Package:

Command To Install Excel Package:
npm install vue-json-excel

After successful installation package reference will be added to the package.json file.

Global Registration:

Now let's register our excel plugin in main.js(entry file)

src/main.js:

import Vue from 'vue'
import App from './App.vue'
import JsonExcel from "vue-json-excel";

Vue.component("downloadExcel", JsonExcel);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

• (Line: 3) Imported 'vue-json-excel' plugin library.
• (Line: 5) Registered json excel component to 'Vue' instance.

Excel With Simple Example:

Let's now implement a simple example to import JSON object to excel.

src/components/HelloWorld.Vue:(Html Part)

<template>
  <div>
    <download-excel :data="json_data">
      <button type="button" class="btn btn-success">Download Excel</button>
    </download-excel>
  </div>
</template>

• Rendered 'download-excel' component.
• (Line: 3) The 'data' property takes an array of objects(JSON data exported to excel).

src/components/HelloWorld.Vue:(Script Part)

data() {
return {
 json_data: [
   {
     name: "naveen"
    }
 ]
};
}

field Property:

The 'field' property takes a javascript object as input. The 'field' property can configure with only required columns from the JSON object to import into an excel sheet. By default, JSON object properties will be taken as heading for the excel column, but while mapping the JSON object properties to 'field' object we can change the heading names.

src/components/HelloWorld.vue:

<download-excel 
:data="json_data"
:fields="json_fields">
  <button type="button" class="btn btn-success">Download Excel</button>
</download-excel>

• (Line: 3) Configured 'fields' option.d

src/components/HelloWorld.vue:

data() {
 return {
  json_fields:{
	"My Friends Name":"name",
	"Designation":"job"
  },
  json_data: [
	{
	  name: "naveen",
	  job: ".net developer",
	  experience: 5
	}
  ]
 };
}

The 'json_data' object contains props like 'name', 'job', 'experience' but only configured 'name', 'job' properties with 'json_fields' object . The "My Friends Name", "Designation" props in 'fields' object will be taken as column heading in the excel.

name Property:

The 'name' property to define the filename. By default plugin uses excel name as 'data'.

src/components/HelloWorld.vue:(Html Part)

<download-excel 
:data="json_data"
:fields="json_fields"
:name="fileName">
  <button type="button" class="btn btn-success">Download Excel</button>
</download-excel>

(Line: 4) The 'name' property defined.

src/components/HelloWorld.vue:(Script Part)

data() {
 return{
  fileName:"my-friends-data",
 };
}

header And footer Properties:

The 'header' and 'footer' props can define for excel.

src/components/HelloWorld.vue:(Html Part)

<download-excel 
:data="json_data"
:fields="json_fields"
:name="fileName"
:header="header"
:footer="footer">
  <button type="button" class="btn btn-success">Download Excel</button>
</download-excel>

src/components/HelloWorld.vue:(Script Part)

data() {
 return {
  header:"Welcome!",
  footer:"Good bye",
 };
}

fetch Property:

In case you need to fetch data from the server, you could use the fetch prop that allows you to define a callback function that is executed when your user clicks the download button. If you use the 'fetch' property then you should not use the 'data' property.

src/components/HelloWorld.vue:

<download-excel 
:fetch="fetchTodos">
  <button type="button" class="btn btn-success">Download Excel</button>
</download-excel>

• (Line: 2) The 'fetch' property assigned with callback function 'fetchTodos'

src/components/HelloWorld.vue:

methods:{
async fetchTodos(){
  const response = await axios.get('https://jsonplaceholder.typicode.com/users/1/todos');
  return response.data;
}
}

• The 'fetchTodos' callback method invokes 'Todos'(test endpoint).

before-generate And before-finish Properties:

The 'before-generate' property takes a callback function. This property can be used to write login for loading message while 'fetch' property invoking API and reading the JSON data.

The 'before-finish' property takes a callback function. This property to dispose of the loading message or notify that API invoked by the 'fetch' callback function completed.

src/components/HelloWorld.vue:(Html Part)

<download-excel 
:fetch="fetchTodos"
:before-generate="beforeGenerate"
:before-finish="beforeFinish">
  <button type="button" class="btn btn-success">Download Excel</button>
</download-excel>

src/components/HelloWorld.vue:(Script Part)

methods:{
async fetchTodos(){
  const response = await axios.get('https://jsonplaceholder.typicode.com/users/1/todos');
  return response.data;
},
beforeGenerate(){
  alert('loading')
},
beforeFinish(){
  alert('close')
}
}

That's all about some of the key options to configure the JSON to Excel generation Vuejs application. To explore more configuration and options check at "https://github.com/jecovier/vue-json-excel".

Support Me!
Buy Me A Coffee PayPal Me

Wrapping Up:

Hopefully, I think this article delivered some useful information on the JSON to Excel generation in the Vuejs application. I love to have your feedback, suggestions, and better techniques in the comment section below.

Follow Me:

Facebook

Twitter

Pinterest