Export CSV Examples

To export JSON as a CSV file, just add the prop type with a value of "csv":

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

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