使用 jQuery 或 Java 制作大文件的最佳方法

Question

我正在 jQuery 和 Java 中開發 web 應用程序。 我的任務是用一些數據庫記錄制作報告。 報告必須能夠以 csv、xls 和 txt 格式下載。 文件的記錄數是可變的，但有些時候太大了，比如一千萬條記錄。

我有兩個問題：

• 第一：制作大文件的最佳選擇是什么，Java 或 jQuery？
• 第二：你能給我一個實現的例子嗎？

我目前在jQuery中實現了csv格式的報表，效果很好，具體是當報表的記錄超過80萬條時，瀏覽器的ZCD69B4957F06CD818D7ZBF3D61980E29結束並結束錯誤。 你知道一些解決方法嗎？

這是代碼：

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

                    if (validarCampos()){
                        // get data report
                        $.ajax({
                            type : "POST",
                            url : "/VentasB/api/getDataReport",
                            data : {
                                fechaIni : fechaIni,
                                fechaFin : fechaFin,
                                orgVentas : Object.keys(orgVentas).join(',').replace(/'/g, ""),
                                canalDist : Object.keys(canalDist).join(','),
                            //canalDist : "'10','11','12'",
                                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'
        });
    }
}

我真的很感謝你的幫助。

Answer 1

對於大文件，您不想在 memory 中構建它然后下載它，因為如您所見，您將用完 memory。 理想的工作流程是在下載的同時構建它，這樣您需要記住的部分就最少了。

Java方式

由於您正在 Java 中構建 web 應用程序，因此您可能正在使用框架，而不是自己實現 HTTP 服務器。 您正在使用的庫可能支持在請求時提供大型服務，而應用程序的 rest 可以繼續工作（流式傳輸）。 最好的方法是使用此功能。

例如，如果您使用的是 Spring MVC，我將實現下載一個大文件，如下所示：

@GetMapping(value="/file/{id}")
public StreamingResponseBody getBigFile(@PathVariable long id) throws IOException {     
    File f = /* find the file here, for example using id*/;
    InputStream in = new BufferedInputStream(new FileInputStream(f));
    return new StreamingResponseBody() {
        @Override
        public void writeTo(OutputStream os) throws IOException {
            FileCopyUtils.copy(in, os);
        }
    };
}

您可以再往前一步 go ，實際上只在寫入時寫入 stream ； 這樣，您不必在發送之前將大文件存儲在本地。

Javascript方式

Webworkers + fetch + stream api may be able to help you to stream data into a file without storing it into memory. 我從來沒有嘗試過，並且很高興這似乎是可能的。 請注意，並非所有瀏覽器都支持必要的 web API

外賣

避免不必要的副本，並盡可能使用 stream 而不是緩沖。 它節省了大量的memory，也避免了在需要之前做的工作。