0

estoy desarrollando un sistema web con java y jQuery, con el framework spring, estoy intentando generar un reporte en un archivo con formato csv y funciona bien todo al ejecutarlo, el problema es que cuando tiene muchos registros por ejemplo a partir de 700,000 me manda un error sobre que se acaba la memoria del navegador y ya no lo hace, estoy usando chrom, la meta es hacer un archivo de siete millones de registros, este es mi cogido:

$("#btnSaveReporte").on(
            'click',
            function(event) {
                getValuesSelected();
                var valiFec = validarFechasEnUso();
                if (validarFechasEnUso()) {

                    if (validarCampos()){
                        // get data report
                        console.log($.map(ofiVentas, function(obj) {
                            return "'" + obj.value + "'"
                        }).join(','));

                        $.ajax({
                            type : "POST",
                            url : "/VentasB/api/getDataReport",
                            data : {
                                fechaIni : fechaIni,
                                fechaFin : fechaFin,
                                orgVentas : Object.keys(orgVentas).join(',').replace(/'/g, ""),
                                canalDist : Object.keys(canalDist).join(','),
                                sector : Object.keys(sector).join(',').replace(/'/g, ""),
                                ofiVentas : $.map(ofiVentas, function(obj) { return "'" + obj.value + "'" }).join(','),
                            },
                            success : function(result) {
                                console.log(result);
                                
                                if(result.data.length > 0){
                                    // CSV
                                    var fileName = "Reporte_Ventas_" + fechaIni
                                            + "_to_" + fechaFin + ".csv";
                                    exportDataToCSV(result.data, fileName,
                                            "#reportFile");
                                    // trigger de click para descargar automaticamente el reporte
                                    
                                    $("#reportFile")[0].click();
                                }else{
                                    Swal.fire({
                                        icon : 'info',
                                        title : 'Sin resultados',
                                        text : 'no se econtró ningún registro que cumpla con los parametros de busqueda.'
                                    })
                                }

                            }
                        });
                    }

                } else {
                    // swal error

                }
            });


// ******************** funcion para descargar csv *********************
function exportDataToCSV(data, title, btnContainer) {
    var csv = ""

    for (var g = 0; g < data.length; g++) {
        // for(var g=0; g < 100; g++){
        // console.log("entro data")
        // console.log(data[g])
        if (g == 0) {

            csv += "bill_stmnt_id, distributor_id, bill_type_cd, bill_stmnt_base_id, eff_dt, eff_tm, bill_distrib_channel_cd,"
                    + "total_charge_amt, total_tax_amt, subtotal_amt, discounts, bill_equipment_deposit, price, perc_fin, amt_fin,"
                    + "bill_rfc_ini, bill_customer_cd, bill_shop_cd, bill_shop_name,bill_shop_id, bill_org_name, bill_address,"
                    + "bill_move_type_cd, bill_payment_condition_cd, region_id, bill_customer_group_cd, bill_customer_group_desc,"
                    + "bill_user_id, bill_sale_force_desc, bill_sale_reason_cd, bill_rfc_end, bill_source_type_cd";
            csv += "\n";
        }

        csv += '"' + data[g].bill_stmnt_id + '",';
        csv += '"' + data[g].distributor_id + '",';
        csv += '"' + data[g].bill_type_cd + '",';
        csv += '"' + data[g].bill_stmnt_base_id + '",';
        csv += '"' + data[g].eff_dt + '",';
        csv += '"' + data[g].eff_tm + '",';
        csv += '"' + data[g].bill_distrib_channel_cd + '",';
        csv += '"' + data[g].total_charge_amt + '",';
        csv += '"' + data[g].total_tax_amt + '",';
        csv += '"' + data[g].subtotal_amt + '",';
        csv += '"' + data[g].discounts + '",';
        csv += '"' + data[g].bill_equipment_deposit + '",';
        csv += '"' + data[g].price + '",';
        csv += '"' + data[g].perc_fin + '",';
        csv += '"' + data[g].amt_fin + '",';
        csv += '"' + data[g].bill_rfc_ini + '",';
        csv += '"' + data[g].bill_customer_cd + '",';
        csv += '"' + data[g].bill_shop_cd + '",';
        csv += '"' + data[g].bill_shop_name + '",';
        csv += '"' + data[g].bill_shop_id + '",';
        csv += '"' + data[g].bill_org_name + '",';
        csv += '"' + data[g].bill_address + '",';
        csv += '"' + data[g].bill_move_type_cd + '",';
        csv += '"' + data[g].bill_payment_condition_cd + '",';
        csv += '"' + data[g].region_id + '",';
        csv += '"' + data[g].bill_customer_group_cd + '",';
        csv += '"' + data[g].bill_customer_group_desc + '",';
        csv += '"' + data[g].bill_user_id + '",';
        csv += '"' + data[g].bill_sale_force_desc + '",';
        csv += '"' + data[g].bill_sale_reason_cd + '",';
        csv += '"' + data[g].bill_rfc_end + '",';
        csv += '"' + data[g].bill_source_type_cd + '",';

        // csv += "hola" + "," ;

        csv += "\n";
    }
    // Deliberate 'false', see comment below
    if (false && window.navigator.msSaveBlob) {
        console.log("entro 1")
        var blob = new Blob([ decodeURIComponent(csv) ], {
            type : 'text/csv;charset=utf8'
        });

        // Crashes in IE 10, IE 11 and Microsoft Edge
        // See MS Edge Issue #10396033
        // Hence, the deliberate 'false'
        // This is here just for completeness
        // Remove the 'false' at your own risk
        window.navigator.msSaveBlob(blob, title);

    } else if (window.Blob && window.URL) {
        console.log("entro 2")
        // HTML5 Blob
        var blob = new Blob([ csv ], {
            type : 'text/csv;charset=utf-8'
        });
        var csvUrl = URL.createObjectURL(blob);

        $(btnContainer).attr({
            'download' : title,
            'href' : csvUrl
        });
    } else {
        console.log("entro 3")
        // Data URI
        var csvData = 'data:application/csv;charset=utf-8,'
                + encodeURIComponent(csv);

        $(btnContainer).attr({
            'download' : title,
            'href' : csvData,
            'target' : '_blank'
        });
    }

}


¿saben de alguna manera de arreglarlo? muchas gracias de antemano.

1
  • El problema es que estás abusando del cliente. ¿Por qué motivo debe el cliente manejar un archivo de 700,000+ registros? Eso no es viable, para eso existen los servidores/bases de datos. Es muy muy raro que un cliente vaya a necesitar ver 700,000 registros de golpe. Y, en caso de que los necesite, tendrías que presentárselos paginados, trayéndolos desde una fuente única (servidor) donde esos datos están optimizados, indexados, etc. ¿Por qué? Porque casi siempre el cliente tendrá un equipo con capacidades limitadas, no es un ordenador de Google con una memoria XXXXXL.
    – A. Cedano
    Commented el 1 jul. 2020 a las 21:21

1 respuesta 1

0

No se puede "intervenir" en la memoria disponible en un browser ni en la computadora del cliente, pues esto le representaría un riesgo de seguridad muy grande.

La mejor estrategia a seguir es tener un proceso de servidor (PHP, C#, cualquiera que sea tu tecnología back-end) que construya por completo el archivo en el servidor, y que luego el usuario baje dicho archivo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.