2017-09-12 25 views
1

我想提取xlsx數據並顯示在我的網頁上。我已經使用SheetJS/js-xlsx從XL表格中提取數據。數據被成功提取,但我不確定如何將這些數據導入到AngularJS中以供進一步使用。使用SheetJS/js-xlsx進行Excel數據提取及其在AngularJS中的使用

/* set up XMLHttpRequest */ 
 
var url = "test.xlsx"; 
 
var oReq = new XMLHttpRequest(); 
 
oReq.open("GET", url, true); 
 
oReq.responseType = "arraybuffer"; 
 

 
oReq.onload = function(e) { 
 
    var arraybuffer = oReq.response; 
 

 
    /* convert data to binary string */ 
 
    var data = new Uint8Array(arraybuffer); 
 
    var arr = new Array(); 
 
    for (var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]); 
 
    var bstr = arr.join(""); 
 

 
    /* Call XLSX */ 
 
    var workbook = XLSX.read(bstr, { 
 
    type: "binary" 
 
    }); 
 

 
    /* DO SOMETHING WITH workbook HERE */ 
 
    var first_sheet_name = workbook.SheetNames[0]; 
 
    /* Get worksheet */ 
 
    var worksheet = workbook.Sheets[first_sheet_name]; 
 
    var xldata = XLSX.utils.sheet_to_json(worksheet, { 
 
    raw: true 
 
    }) 
 
    console.log(xldata); 
 
} 
 

 
oReq.send();

在控制檯中,我能看到包含在test.xlsx數據的Excel工作表。要使用包含在xldata變量中的這些數據,我該如何在Angular JS中進行操作?我試過這個。但它不起作用。有人可以幫忙嗎?

var app=angular.module("my-app",[]); 
app.controller("myCtrl",function($scope){ 
    $scope.message=xldata; 
}); 

<div ng-controller="myCtrl"> 
{{message}} 
</div> 

這是我收到的錯誤:

ReferenceError: xldata is not defined

回答

0

似乎xlData返回一個JSON對象。因此,您不能期望看到它與控制檯能夠向您展示的相同方式。

爲什麼你不在你的html中有ng-repeat來讀取和顯示xldata?

在你的HTML,這樣做

<Table> 
<Thead> 
<Tr> 
<Th ng-repeat="(key,val) in message[0]">{{key}}</th> 
</tr> 
</thead> 
<Tbody> 
<Tr ng-repeat="(key,val) in message"> 
<Td>{{val}}</td> 
</tr> 
</tbody> 
</Table> 

當然,它會更容易建議,如果你共享你的xldata JSON對象的一個​​片段。

相關問題