Question

我正在努力让我的代码以HTML显示。我知道我可能缺少一些非常简单的东西，但是我被卡住了。

我有一个Angular 7应用。我想检索xlsx数据（工作表）并将其显示为HTML。简单吧？我的问题是所有示例都在浏览器js中，我需要从组件中检索它。这是关键，我已经有了方法，可以通过控制台打印出json和html。日志，但是找不到如何将其返回到HTML中的可编辑网格中。

component.ts

fileUpload() {
let fileReader = new FileReader();
fileReader.onload = (e) => {
  this.arrayBuffer = fileReader.result;
  var data = new Uint8Array(this.arrayBuffer);
  var arr = new Array();
  for (var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
  var bstr = arr.join("");
  var workbook = XLSX.read(bstr, { type: "binary" });
  var first_sheet_name = workbook.SheetNames[0];
  var worksheet = workbook.Sheets[first_sheet_name];
  console.log(XLSX.utils.sheet_to_json(worksheet, { raw: true }));
  console.log(XLSX.utils.sheet_to_html(worksheet));

}
fileReader.readAsArrayBuffer(this.file);

}

html

<input type="file" style="display: inline-block;" (change)="incomingfile($event)" placeholder="Upload file" accept=".xls,.xlsx,.ods">

上传

当前，我可以检索任何工作簿/工作表，但是我根本无法找到如何从.ts文件将其返回到某种ui网格中。

我经历了许多教程，包括ui-grid，ng-grid和https://redstapler.co/sheetjs-tutorial-convert-excel-html-table/

我很感激我可能很笨，但是任何帮助都将不胜感激。我不能使用商业组件，而只需要在html页面上的可编辑表格中呈现它。然后，我将研究如何更改列标题并通过后端SpringBoot REST将文件导出到Mongo（全部正常）

我知道在SO上有许多类似的问题，但是工作示例似乎没有显示数据（即使没有任何错误）。可能是版本错误，等等。我也尝试了ui-grid，但想到了这个问题：“ FileReader”上的“ readAsArrayBuffer”：参数1的类型不是“ Blob”。但是，这里的示例也是在.js中，而不是通过打字稿组件：parameter is not of type 'Blob'

我根本无法将输出绑定到HTML

角返回HTML网格中上传的Excel文件

0 个答案: