Skip to content

JSON Excel Examples

Simple Running Example

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",
                  },
              },
          ],
          json_meta: [
          [
              {
                  key: "charset",
                  value: "utf-8",
              },
          ],
      ],
      }
  },
  component:{
    downloadExcel:JsonExcel
  }
}).mount('#app');

In your HTML call it like

html
<download-excel
  class="btn btn-default"
  :data="json_data"
  :fields="json_fields"
  worksheet="My Worksheet"
  name="filename.xls"
>
  Download Excel (you can customize this with html code!)
</download-excel>

REQUIRED

  • json_data: Contains the data you want to export.
  • json_fields: You can select what fields to export. Specify nested data and assign labels to the fields. The key is the label, the value is the JSON field. This will export the field data 'as is'. If you need to customize the the exported data you can define a callback function. Thanks to @gucastiliao.
js
let json_fields = {
  // regular field (exported data 'as is')
  fieldLabel: attributeName, // nested attribute supported
  // callback function for data formatting
  anotherFieldLabel: {
    field: anotherAttributeName, // nested attribute supported
    callback: (value) => {
      return `formatted value ${value}`;
    },
  },
};

json_fields is a object that represents which columns will be exported. If no object is provided, the component will be use the first object in your data array to extract the keys as columns names. Json field example:

:export-fields="{
    'Human friendly name': '_name_field_from_json',
    'user's last name': '_last_name_text'
}"