Export .xlsx Format Examples

WARNING

Only works with "xlsx" format

To export JSON as an xlsx file with custom cell formats:

import {createApp} from 'vue'
import JsonExcel from "vue-json-excel3";

const app = new createApp({
    data() {
        return {
            json_data: [
                {name: 'Alice', salary: 50000, percentage: 0.75, number: 123.456},
                {name: 'Bob', salary: 60000, percentage: 0.85, number: 789.123},
            ],
            formats: {
                B: '"$"#,##0.00_);\\("$"#,##0.00\\)', // Currency format for column B
                C: '0.00%',                             // Percentage format for column C
                D: '0.00',                               // Number format for column D
            },
        }
    },
    component: {
        downloadExcel: JsonExcel
    }
}).mount('#app');

In your HTML call it like

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

For setting widths of columns:(Supported after +1.0.26)

import {createApp} from 'vue'
import JsonExcel from "vue-json-excel3";

const app = new createApp({
    data() {
        return {
            json_data: [
                {name: 'Alice', salary: 50000, percentage: 0.75, number: 123.456},
                {name: 'Bob', salary: 60000, percentage: 0.85, number: 789.123},
            ],
            formats: {
                B: '"$"#,##0.00_);\\("$"#,##0.00\\)', // Currency format for column B
                C: '0.00%',                             // Percentage format for column C
                D: '0.00',                               // Number format for column D
            },
            widths: {
                A: 10,
                B: 10,
                C: 5,
                D: 5
            }
        }
    },
    component: {
        downloadExcel: JsonExcel
    }
}).mount('#app');

In your HTML call it like

<download-excel
        class="btn"
        :data="data2"
        :formats="formats2"
        :widths="widths"
        type="xlsx" worksheet="My Worksheet"
        name="filename.xlsx"
>
    Download Excel (you can customize this with html code!)
</download-excel>