javascript - 使用SheetJS/js-xlsx提取Excel数据及其在AngularJS中的用法

Question

我想提取 xlsx 数据并显示到我的网页上。我使用 SheetJS/js-xlsx 从 XL 工作表中提取数据。数据已成功提取，但我不确定如何将此数据获取到 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

Answer 1

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 对象的片段，建议会更容易。