Excel Table to Html table

问题

I have been trying to get an Excel file into my code and then generate a table with it. I don't know what is wrong with my code. It doesn't show any errors, but it doesn't work either.... Please Help, I think the file loaded might not be getting into the second CreateTable function properly. Code:

<!DOCTYPE html>
<html>
<head>
    <title>whatever</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>




<script type="text/javascript" src="http://cdn.jsdelivr.net/alasql/0.3/alasql.min.js">

npm install -- save alasql
bower install --save alasql    
import alasql from 'alasql';  
npm install -g alasql          

function testfunction(){

(function () {
    'use strict';

    angular
        .module('jfy')
        .factory('ImportExportToExcel', ImportExportToExcel);

    function ImportExportToExcel(alasql, $log, $rootScope) {
        return {
            importFromExcel: function (event) {
                if (event.target.files.length == 0) {
                    return false;
                }
                alasql('SELECT * FROM FILE("test.xlsx",{headers:true})', [event], function (data) {
                    $rootScope.$broadcast('import-excel-data');
                });


            },


            exportToExcel: function (fileName, targetData) {
                if (!angular.isArray(targetData)) {
                    $log.error('Can not export error type data to excel.');
                    return;
                }
                alasql('SELECT * INTO XLSX("' + fileName + '.xlsx",{headers:true}) FROM ?', [targetData]);
            }
        }
    }



})();
}

$(document).ready(function(){
    $('#MyButton').click(function(){
       importFromExcel();
    });
  });

var myBooks = importFromExcel();
function CreateTable(){



 var col = [];
        for (var i = 0; i < myBooks.length; i++) {
            for (var key in myBooks[i]) {
                if (col.indexOf(key) === -1) {
                    col.push(key);
                }
            }
        }

        // CREATE DYNAMIC TABLE.
        var table = document.createElement("table");

        // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

        var tr = table.insertRow(-1);                   // TABLE ROW.

        for (var i = 0; i < col.length; i++) {
            var th = document.createElement("th");      // TABLE HEADER.
            th.innerHTML = col[i];
            tr.appendChild(th);
        }

        // ADD JSON DATA TO THE TABLE AS ROWS.
        for (var i = 0; i < myBooks.length; i++) {

            tr = table.insertRow(-1);

            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = myBooks[i][col[j]];
            }
        }

        // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
        var divContainer = document.getElementById("showData");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
        object.onclick = function(){table};
}}

$(document).ready(function(){
    $('#MyButton2').click(function(){
       CreateTable();
    });
  });

</script>




</head>
<body>
<input type="button" value="Retrieve Data" id="MyButton" >
<div id="data"></div>

<input type="button" value="Create Table" id="MyButton2" >

    <div id="showData"></div>

</body>
</html>

回答1:

I don't know the exact answer, but use

<script type="text/javascript" src="http://cdn.jsdelivr.net/alasql/0.3/alasql.min.js">(NO CODE HERE!!!)</script> <script>(YOUR CODE HERE)</script>

instead of

<script type="text/javascript" src="http://cdn.jsdelivr.net/alasql/0.3/alasql.min.js">(your code here)</script>

this is blocking the functions from calling.

also these lines are blocking the functions:

npm install -- save alasql
bower install --save alasql
import alasql from 'alasql';
npm install -g alasql

来源：https://stackoverflow.com/questions/44141212/excel-table-to-html-table

标签

javascript

arrays

excel

html-table

alasql