adcfi/pages/menu.html

<main class="container">
    <button type="button" class="secondary" v-for="item in menu" @click="item.click">
        <i :class="item.icon"></i>
        {{ item.name }}
    </button>
</main>
<script>
    PetiteVue.createApp({
        menu: [{
            name: 'Construcción de Calificación',
            icon: 'fas fa-plus',
            url: '/export/excel.php',
            filename: 'calificacion.csv',
            async click() {
                store.loading = true;
                const response = await fetch(this.url, { method: 'POST', body: JSON.stringify({ query: 'calificaciones' }) });
                const blob = await response.blob();
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = this.filename;
                a.charset = "windows-1252"; // Set the charset to ANSI
                a.click();
                a.remove();
                store.loading = false;
            }
        },
        {
            name: 'Usuarios registrados',
            icon: 'fas fa-plus',
            url: '/export/excel.php',
            filename: 'usuarios.csv',
            async click() {
                store.loading = true;
                const response = await fetch(this.url, { method: 'POST', body: JSON.stringify({ query: 'usuarios' }) });
                const blob = await response.blob();
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = this.filename;
                a.charset = "windows-1252"; // Set the charset to ANSI
                a.click();
                a.remove();
                store.loading = false;
            }
        }
        ],

    }).mount();
</script>