Export JSON Data Into Excel File - vue3-json-excel

Install & Download:

# NPM
$ npm i vue-json-excel3

Description:

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}`;
    }
  },
},