Javascript 如何在angular4中显示excel文件

我需要使用文件输入类型选择一个Excel文件，并将该文件显示到特定容器中，我需要执行一些操作。通过使用Sheet.js和xlsx，我在javascript中也有同样的功能。。。我试图将其更改为Angular，但在sheetjsw.js ImportScript时会出现错误。为此，我使用canvas datagrid、dropsheet和jquery

Uncaught ReferenceError: importScripts is not defined
at scripts.bundle.js:10874

---

我想帮忙取得结果。对于我来说，将js东西转换为Angular更好，因为它减少了创建新东西的时间。

您应该遵循以下3个步骤

步骤1：导入ts xlsx请参阅：进行安装

步骤2：使用FileReader转换为arraybuffer

步骤3：使用XLSX读取arraybuffer并将其转换为工作簿

在您的打字脚本文件中

import * as XLSX from 'xlsx';

onFileChange(evt: any) {
    /* wire up file reader */
    const target: DataTransfer = <DataTransfer>(evt.target);
    if (target.files.length !== 1) throw new Error('Cannot use multiple files');
    const reader: FileReader = new FileReader();
    reader.onload = (e: any) => {
      /* read workbook */
      const bstr: string = e.target.result;
      const wb: XLSX.WorkBook = XLSX.read(bstr, { type: 'binary' });

      /* grab first sheet */
      const wsname: string = wb.SheetNames[0];
      const ws: XLSX.WorkSheet = wb.Sheets[wsname];

      /* save data */
      this.data = <AOA>(XLSX.utils.sheet_to_json(ws, { header: 1 }));
      console.log(this.data);
    };
    reader.readAsBinaryString(target.files[0]);
}


export(): void {
    /* generate worksheet */
    const ws: XLSX.WorkSheet = XLSX.utils.aoa_to_sheet(this.data);

    /* generate workbook and add the worksheet */
    const wb: XLSX.WorkBook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

    /* save to file */
    XLSX.writeFile(wb, this.fileName);
}

从“XLSX”导入*为XLSX；
onFileChange（evt:any）{
/*连接文件读取器*/
常量目标：数据传输=（evt.target）；
如果（target.files.length！==1）抛出新错误（“无法使用多个文件”）；
常量读取器：FileReader=newfilereader（）；
reader.onload=（e:any）=>{
/*阅读工作手册*/
常量bstr:string=e.target.result；
常量wb:XLSX.WorkBook=XLSX.read（bstr，{type:'binary'}）；
/*抢第一张*/
const wsname:string=wb.SheetNames[0]；
const ws:XLSX.WorkSheet=wb.Sheets[wsname]；
/*保存数据*/
this.data=（XLSX.utils.sheet_to_json（ws，{header:1}））；
console.log（this.data）；
};
reader.readAsBinaryString（target.files[0]）；
}
导出（）：无效{
/*生成工作表*/
const ws:XLSX.WorkSheet=XLSX.utils.aoa_to_sheet（this.data）；
/*生成工作簿并添加工作表*/
const wb:XLSX.WorkBook=XLSX.utils.book_new（）；
XLSX.utils.book_append_sheet（wb，ws，“Sheet1”）；
/*保存到文件*/
XLSX.writeFile（wb，this.fileName）；
}

在Html文件中

<input type="file" (change)="onFileChange($event)" multiple="false" />
<table>
    <tbody>
        <tr *ngFor="let row of data">
            <td *ngFor="let val of row">
                {{val}}
            </td>
        </tr>
    </tbody>
</table>
<button (click)="export()">Export!</button>

{{val}}
出口！

Sheet.js github repo有一个将其与Angular一起使用的示例-请参阅@greyBearedGeek的可能副本，我尝试了一个，，，该文件已显示，但不是excel格式，意味着无法单击行和列，它就像带有列和行的文本文档…如何更改它？