是否可以读取excel工作表并在前端显示其内容？

我在想，我是否可以使用XLSX读取excel工作表的内容，并在前端显示其内容

我试着使用

tmpArray= [];
reader.onload = function(e : any) {
   var data = new Uint8Array(e.target.result);
   var workbook = XLSX.read(data, {type: 'array'});

   let worksheet = workbook.Sheets[workbook.SheetNames[0]];

   // sample values //
   let desired_cell = worksheet['B5'];
   let cellB16 = worksheet['B16'];
   // sample values //
   let desired_value12 = (cellB16 ? cellB16.v : undefined);
   tmpArray.push[desired_value12];
};


but outside this onload function, array of tmpArray don't exist anymore.
So what i wanted is to access the tmpArray and it's contents after the onload function. Is there any work around to do this?

试试这个

在您的打字脚本文件中

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）；
}

尝试此操作-读取excel文件

从“XLSX”导入*作为XLSX

---

请进行以下更改，您将能够从任何位置访问

tmpArray

的值

tmpArray; // changed here and moved it to outside the function

let self = this; // please note this change
reader.onload = function(e : any) {
   var data = new Uint8Array(e.target.result);
   var workbook = XLSX.read(data, {type: 'array'});

   let worksheet = workbook.Sheets[workbook.SheetNames[0]];

   // sample values //
   let desired_cell = worksheet['B5'];
   let cellB16 = worksheet['B16'];
   // sample values //
   let desired_value12 = (cellB16 ? cellB16.v : undefined);
   self.tmpArray = desired_value12; // changed here
};

---

只是

this

关键字的计算结果是当前执行上下文的ThisBinding的值。因此，您必须有一个简单的变通方法来访问该值之外的值function@Opkko林：你试过这个吗？我好像不能像这样把它绑起来。我写的只是一个抽象版本。它说组件中不存在tmpArray。@OpkkoLim更新了答案，请将

tmpArray

移动到组件类中函数定义之外的顶部（就像任何普通变量声明一样）。嗨@Joel Joseph，我也得出了相同的结论，但是，当我将值推入tmpArray时，它说里面的值是未定义的。导致一些问题。我必须将值转换为json吗？必须这样做。我不能将工作表保存到新文件中吗？我只想在onload期间显示值{header:1}实际上做什么？对不起，我不明白XLS@dasunse的自述文件或index.d.ts

tmpArray; // changed here and moved it to outside the function

let self = this; // please note this change
reader.onload = function(e : any) {
   var data = new Uint8Array(e.target.result);
   var workbook = XLSX.read(data, {type: 'array'});

   let worksheet = workbook.Sheets[workbook.SheetNames[0]];

   // sample values //
   let desired_cell = worksheet['B5'];
   let cellB16 = worksheet['B16'];
   // sample values //
   let desired_value12 = (cellB16 ? cellB16.v : undefined);
   self.tmpArray = desired_value12; // changed here
};