Excel 表格转 HTML 表格答案

【问题标题】：Excel Table to Html tableExcel 表格转 HTML 表格
【发布时间】：2017-10-23 18:49:49
【问题描述】：

我一直在尝试将 Excel 文件放入我的代码中，然后用它生成一个表格。我不知道我的代码有什么问题。它没有显示任何错误，但它也不起作用......请帮助，我认为加载的文件可能没有正确进入第二个 CreateTable 函数。代码：

<!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>

【问题讨论】：

标签： javascript arrays excel html-table alasql

【解决方案1】：

我不知道确切的答案，但使用

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

而不是

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

这会阻止函数调用。

这些行也阻塞了功能：

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

【讨论】：