2017-05-23 150 views
0

我一直在試圖把Excel文件放到我的代碼中,然後用它生成一個表格。我不知道我的代碼有什麼問題。它不顯示任何錯誤,但它也不起作用....請幫助,我認爲加載的文件可能沒有正確進入第二個CreateTable函數。 代碼:Excel表格到Html表格

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

回答

0

我不知道確切的答案,但使用

<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