vue3-json-excel is a Vue 3 component that allows developers to download JSON data as an Excel (.xls or .xlsx) file directly from the browser. This can be useful for exporting data from a Vue app to Excel for analysis or sharing.
One thing to note is that vue3-json-excel uses HTML tables behind the scenes to generate the Excel files. Since MS Excel no longer recognizes HTML as native content, you’ll get a warning message before opening files created with this component. But not to worry – the content will render perfectly despite the warning that can’t be avoided.
How to use it:
1. Import and register the vue3-json-excel component.
import { createApp } from 'vue'
const app = createApp({})
import JsonExcel from "vue-json-excel3";
app.component("downloadExcel", JsonExcel);
2. Add the download-excel component to your template and define your JSON data as follows:
<download-excel :data="json_data" type="csv" name="filename.xls" > Download Excel </download-excel>
3. Available props.
// If true, don't download but emit a Blob
emitBlob: {
type: Boolean,
default: false,
},
debounce: {
type: Number,
default: 500,
},
// mime type [xls, csv, xlsx]
type: {
type: String,
default: "xls",
},
// Json to download
data: {
type: Array,
required: false,
default: null,
},
// fields inside the Json Object that you want to export
// if no given, all the properties in the Json are exported
fields: {
type: Object,
default: () => null,
},
// this prop is used to fix the problem with other components that use the
// variable fields, like vee-validate. exportFields works exactly like fields
exportFields: {
type: Object,
default: () => null,
},
// Use as fallback when the row has no field values
defaultValue: {
type: String,
required: false,
default: "",
},
// Title(s) for the data, could be a string or an array of strings (multiple titles)
header: {
default: null,
},
// Title(s) for single column data, must be an array (ex: ['titleCol0',,TitleCol2])
perColumnsHeaders: {
default: null,
},
// Footer(s) for the data, could be a string or an array of strings (multiple footers)
footer: {
default: null,
},
// filename to export
name: {
type: String,
default: "data.xls",
},
fetch: {
type: Function,
},
meta: {
type: Array,
default: () => [],
},
worksheet: {
type: String,
default: "Sheet1",
},
//event before generate was called
beforeGenerate: {
type: Function,
},
//event before download pops up
beforeFinish: {
type: Function,
},
// Determine if CSV Data should be escaped
escapeCsv: {
type: Boolean,
default: true,
},
// long number stringify
stringifyLongNum: {
type: Boolean,
default: false,
},
4. Add callbacks to your JSON data.
json_fields: {
'Complete name': 'name',
'City': 'city',
'Telephone': 'phone.mobile',
'Telephone 2' : {
field: 'phone.landline',
callback: (value) => {
return `Landline Phone - ${value}`;
}
},
},
Preview:
Download Details:
Author: pratik227
Live Demo: https://vue-json-excel3.netlify.app/simple-examples.html
Download Link: https://github.com/pratik227/vue3-json-excel/archive/refs/heads/main.zip
Official Website: https://github.com/pratik227/vue3-json-excel
Install & Download:
# NPM
$ npm i vue-json-excel3