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>