How to load an Excel table and turn it into an HTML table using Javascript?

Asked

Viewed 1,356 times

-1

I intend to create a button to load a xls or csv file and turn this Excel table into an HTML table, how can I do this using Javascript? Please...

javascript html excel
  • 2

    You’ll need a programming language. I suggest adding the language of your preference in the tags, so that we can respond with examples in this language.

  • Oh yes, I will, thank you!

  • @Juanlima you tried the solution I proposed to you?

1 answer

0

There is a jQuery plugin that makes it possible to convert . csv files to JSON. This way you can extract the data from the file and work with them on screen as well as wish.

Follow the official site link of the plugin: papaparse.com

I made this code below to test the plugin (You can easily copy and test on your computer):

<html>
<head>
    <title>Teste PapaParse</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="http://papaparse.com/resources/js/papaparse.js"></script>
    <style>
        td {
            border: 1px solid #ccc;
            padding: 1px;
            text-align: center;
            font-family: Helvetica, sans-serif;
        }
        table {
            border-collapse: collapse;
            margin:auto;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {

            $('#btnConverter').click(function(){

                // veja mais em: http://papaparse.com/docs#jquery
                $('input[type=file]').parse({
                    //definindo configuração
                    config : buildConfig()
                });
            });

            function buildConfig()
            {
                // função chamada quando completar a conversão
                return {complete: Complete};
            }

            function Complete(results)
            {
                // limpando conteudo da div
                $('#tabela_aqui').html('');
                // inserindo tabela na div
                $('<table id="tabela"></table>').appendTo('#tabela_aqui');
                // inserindo linhas
                for (var i = 0; i < results.data.length; i++) {
                    $('<tr></tr>').appendTo('#tabela');
                }
                // inserindo celulas nas linhas
                $('tr').each(function(key, val) {
                    for (var j = 0; j < results.data[0].length; j++) {
                        $(this).append('<td>'+results.data[key][j]+'</td>');
                    }
                });

            }
        });
    </script>
</head>
<body>
    Arquivo (.csv) <input type="file" name="csv_file"><br>
    <button id="btnConverter">Converter</button>
    <br/>
    <div id="tabela_aqui"></div>
</body></html>

The above code provides a button to select the file and another that converts the file to JSON and displays on screen as a table.

In that link there is a file . csv to test the functionality.

Browser other questions tagged javascript html excel

You are not signed in. Login or sign up in order to post.