Export .xlsx Format Examples
To export JSON as a xlsx file, just add the prop type
with a value of "xlsx":
js
import { createApp } from 'vue'
import JsonExcel from "vue-json-excel3";
const app = new createApp({
data(){
return {
json_fields: {
"Complete name": "name",
City: "city",
Telephone: "phone.mobile",
"Telephone 2": {
field: "phone.landline",
callback: (value) => {
return `Landline Phone - ${value}`;
},
},
},
json_data: [
{
name: "Tony Peña",
city: "New York",
country: "United States",
birthdate: "1978-03-15",
phone: {
mobile: "1-541-754-3010",
landline: "(541) 754-3010",
},
},
{
name: "Thessaloniki",
city: "Athens",
country: "Greece",
birthdate: "1987-11-23",
phone: {
mobile: "+1 855 275 5071",
landline: "(2741) 2621-244",
},
},
],
}
},
component:{
downloadExcel:JsonExcel
}
}).mount('#app');
In your HTML call it like
html
<download-excel
class="btn btn-default"
:data="json_data"
:fields="json_fields"
type="xlsx" worksheet="My Worksheet"
name="filename.xlsx"
>
Download Excel (you can customize this with html code!)
</download-excel>