Buscar contenidos

viernes, 5 de julio de 2019

Cargar un Excel en Html Table Client-Side (xlsx.core.min.js)


<h1>Ejemplo</h1>

<div id="id_ruta" style="display:none;" data-url-controller="@Url.Action("CargaExcel","Home")"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.7.7/xlsx.core.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<script>
    function handleFile(e) {
        //Get the files from Upload control
        var files = e.target.files;
        var i, f;
        //Loop through files
        for (i = 0, f = files[i]; i != files.length; ++i) {
            var reader = new FileReader();
            var name = f.name;
            reader.onload = function (e) {
                var data = e.target.result;

                var result;
                var workbook = XLSX.read(data, { type: 'binary' });

                var sheet_name_list = workbook.SheetNames;
                sheet_name_list.forEach(function (y) { /* iterate through sheets */

                    var roa = XLSX.utils.sheet_to_json(workbook.Sheets[y]);

                    //construir la estructura de la Tabla

                    var arr = [];

                    var errores = [];

                    var flag_validacion = true;

                    for (i = 0; i < roa.length; i = i + 1)
                    {

                        var registro = {
                            columA: roa[i].columA,
                            columB: roa[i].columB
                        }

                        arr.push(registro);

                        var valor_columnaA = roa[i].columA;

                        if (isNumber(valor_columnaA)) {
                            console.log("1");
                        } else {
                            console.log("0");

                            flag_validacion = false;

                            var error = {                               
                                DatoIncorrecto: valor_columnaA
                            }

                            errores.push(error);
                        }                      
                    }

                   

                    //var myJsonString = JSON.stringify(arr);

                    //var myJsonString = JSON.stringify({ 'registros': arr });

                    //var arr_from_json = JSON.parse(myJsonString );

                    //[{"columA":"a","columB":"b"},{"columA":"a","columB":"b"},{"columA":"a","columB":"b"}]
                    //[{"columA":"a","columB":"1"},{"columA":"b","columB":"2"},{"columA":"c","columB":"3"},{"columA":"d","columB":"4"},{"columA":"e","columB":"5"},{"columA":"f","columB":"6"}]


                    //[HttpPost]
                    //public JsonResult CargaExcel(List < Registro > registros)
                    //{
                    //return Json("");
                    //}


                    console.log();


                    if (flag_validacion) {

                        $.ajax({
                            type: "post",
                            url: $("#id_ruta").attr("data-url-controller"),
                            data: { registros: arr },
                            datatype: "json",
                            cache: false,
                            success: function (data) {
                                alert(data);
                            },
                            error: function (xhr) {
                                alert('No Valid Data');
                            }
                        });


                    } else {

                        var listado_errores = "";

                        for (var i = 0; i < errores.length; i++) {
                            listado_errores += "<br>" + errores[i].DatoIncorrecto;
                        }

                        $("#id_content").html("Favor revisar el Excel, hay valores incorrectos: <hr> " + listado_errores);

                    }

                
                    function isNumber(n) {
                        return !isNaN(parseFloat(n)) && isFinite(n);
                    }

                    console.log();


                    //var myvar = '<table class="table">' +
                    //    '<tr>' +
                    //    '<th>columnaA</th>' +
                    //    '<th>columnab</th>' +
                    //    '</tr>';

                    //for (i = 0; i < roa.length; i = i + 1) {

                    //    myvar += '<tr>' +
                    //        '<td>' + roa[i].columA + '</td>' +
                    //        '<td>' + roa[i].columB + '</tD>' +
                    //        '</tr>'

                    //}

                    //myvar += '</table>';

                    //$("#id_content").html(myvar);

                });
                //Get the first column first cell value
                //alert(result[0].Column1);
            };

            reader.readAsArrayBuffer(f);
        }
    }

    //Change event to dropdownlist
    $(document).ready(function () {
        $('#files').change(handleFile);
    });
</script>

<input type="file" id="files" name="files" />

<div id="id_content" style="font-size:13px; color:darkred;"></div>

No hay comentarios:

Publicar un comentario