Skip to content

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>