Juan Manuel Antón
Juan Manuel Antón
Vue.js
Comparte:

Exportar Excel desde VueJS

Buenas tardes Jorge, he exportado de manera exitosa un archivo excel con puro Laravel, sin embargo no encuentro la manera de realizarlo desde VueJS
// Metodo VueJS
exportarComisionesJV(){
    
    this.mostrarProgressBar();

    var url = this.ruta + '/reportes/exportarComisionesJV';
    axios.get(url, {
        params: {
            'nidempresa'    :   parseInt(sessionStorage.getItem("nIdEmpresa")),
            'nidsucursal'   :   this.formFiltro.nidsucursal,
            'nidjefeventas' :   this.formFiltro.nidjefeventas,
            'nidcronograma' :   this.formFiltro.nidcronograma,
            'opcion'        :   1
        }
    }).then(response => {
        //RESPUESTA

        $("#myBar").hide();
    }).catch(error => {
        console.log(error);
        if (error.response) {
            if (error.response.status == 401) {
                swal('VUELVA INICIAR SESIÓN - SESIÓN INHAUTORIZADA - 401');
                location.reload('0');
            }
        }
        $("#myBar").hide();
    });
},

//Controlador
public function exportarComisionesJV(Request $request)
{
    $nidempresa     =   $request->nidempresa;
    $nidsucursal    =   $request->nidsucursal;
    $nidjefeventas  =   $request->nidjefeventas;
    $nidcronograma  =   $request->nidcronograma;
    
    //=================== OBTENER EL LAS COMISIONES DE LOS AC POR JV ===================
    $arrayComision = DB::select('exec [usp_Reporte_DescuentosOtorgados_GetComisiones_JV] ?, ?, ?, ?',
                                    [
                                        $nidempresa,
                                        $nidsucursal,
                                        $nidjefeventas,
                                        $nidcronograma
                                    ]);


    return (new ComisionJV)->obtenerData($arrayComision)->download('comision_jv.xlsx');

}

¿Como podría exportarlo desde VueJS?, muy amable
Jorge García
Jorge García (2780 xp)
Esta sería una opción rápida, me dices si te sirve:
exportarComisionesJV() {
    params: {
        'nidempresa'    :   parseInt(sessionStorage.getItem("nIdEmpresa")),
        'nidsucursal'   :   this.formFiltro.nidsucursal,
        'nidjefeventas' :   this.formFiltro.nidjefeventas,
        'nidcronograma' :   this.formFiltro.nidcronograma,
        'opcion'        :   1
    }
    let queryString = Object.keys(params).map(key => key + '=' + params[key]).join('&');
    let url = this.ruta + '/reportes/exportarComisionesJV?' + queryString;

    window.location.href = url; // esto redireccionará al usuario a la ruta de descarga
}
2
Juan Manuel Antón
Juan Manuel Antón (66 xp)
Buenas tardes estimado Jorge, tal y como lo has programado, genera error en sintaxis.
Cambie solamente el params.

let params = {
    'nidempresa'    :   parseInt(sessionStorage.getItem("nIdEmpresa")),
    'nidsucursal'   :   this.formFiltro.nidsucursal,
    'nidjefeventas' :   this.formFiltro.nidjefeventas,
    'nidcronograma' :   this.formFiltro.nidcronograma,
    'opcion'        :   1
}

Luego todo funciona perfectamente, gracias.

Otra solución que encontré fue la siguiente: 
- Donde mantengo la estructura de la petición AXIOS.
- Instancio un objeto Blob donde paso el response y especifico el MimeType. 


var url = this.ruta + '/reportes/exportarComisionesJV';
axios.get(url, {
    responseType: 'arraybuffer',
    params: {
        'nidempresa'    :   parseInt(sessionStorage.getItem("nIdEmpresa")),
        'nidsucursal'   :   this.formFiltro.nidsucursal,
        'nidjefeventas' :   this.formFiltro.nidjefeventas,
        'nidcronograma' :   this.formFiltro.nidcronograma,
        'opcion'        :   1
    }
}).then(response => {
    //RESPUESTA
    let blob = new Blob([response.data], { type: 'application/vnd.ms-excel' })
    let link = document.createElement('a')
    link.href = window.URL.createObjectURL(blob)
    link.download = 'comisionjv.xlsx'
    link.click()

Capaz, me comentas cual es la mejor opción, saludos y gracias por la pronta ayuda.
Jorge García
Jorge García (2780 xp)
Tienes razón, olvidé declarar la variable params, sólo la copié de tu código, pero esa es la idea, me avisas si funciona.
1
Jorge García
Jorge García (2780 xp)
Acabo de ver tu respuesta completa, está muy bien, al final la mejor opción depende del contexto. 
1
Juan Manuel Antón
Juan Manuel Antón (66 xp)
Ah excelente, gracias por la ayuda! :D