Question

你对angular2很新，所以如果这很简单就道歉 - 我试图使用名为ts-xlsx的lib读取excel文件并将数据注入主app根组件 - 错误我＆＃39 ;得到的是

zone.js：355Unhandled Promise rejection：./AppComponent类中的错误AppComponent_Host - 内联模板：0：0由以下原因引起：！CompObj不是函数;区域：;任务：Promise.then;价值：

APP-service.ts

import { Injectable } from '@angular/core';
import { read, IWorkBook, IWorkSheet, utils } from 'ts-xlsx';



@Injectable()
export class OperationDataService {

    private xbFile = 'test.xlsx';
    private wb: IWorkBook = read(this.xbFile);
    private wbSheet: IWorkSheet = this.wb.Sheets[1];

    objAr: any[];

    constructor() { }

    getData() {

        this.objAr = utils.sheet_to_json(this.wbSheet, { header: 1 });

    }
}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { OperationDataService } from './app.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [OperationDataService]
})
export class AppComponent implements OnInit {

  ObjArray: any[];


  constructor(private _operationDataService: OperationDataService) { }

  ngOnInit() {

    this.ObjArray[1] = this._operationDataService.getData();

  }

}

我无法找到相关文档，所以我们非常感谢您的帮助。

更新

即使 - 虽然在线信息很小，似乎我抓住上面文件的方式存在一些问题 - 所以我重新编写服务组件以对齐转换为typescript的原始alax示例

import { Injectable } from '@angular/core'; import { read, IWorkBook, IWorkSheet, utils } from 'ts-xlsx';

@Injectable() export class OperationDataService {
    url: string;
    oReq: any;
    wb: IWorkBook;
    wbSheet: IWorkSheet;
    arraybuffer: any;
    data: any;
    arr: any;
    bstr: any;
    objAr: any[];

    constructor() {
        this.url = '../assets/data/Operations.xlsx';
        this.oReq = new XMLHttpRequest();
        this.oReq.open('GET', this.url, true);
        this.oReq.responseType = 'arraybuffer';

    }

    getdata() {

        this.oReq.onload = function(): any {

        this.arraybuffer = this.oReq.response;

        /* convert data to binary string */
        this.data = new Uint8Array(this.arraybuffer);
        this.arr = new Array();

        for (let item of this.data) {
            this.arr[item] = String.fromCharCode(this.data[item]);
        }

        this.bstr = this.arr.join('');
        console.log(this.oReq.responseText);

        this.wb = read(this.bstr, {type: 'binary'});
        this.wbSheet = this.wb.Sheets[0];

        this.objAr = utils.sheet_to_json(this.wbSheet, { header: 1 });
        console.log(utils.sheet_to_json(this.wbSheet, { header: 1 }));

        return this.objAr;
        };
    } }

现在我没有收到任何错误，但我看不到json - 任何想法，我做错了什么？

Answer 1

从你发布的代码来看，这在理论上看起来不错，但仍有一些错误。

您在ObjArray中使用AppComponent而未对其进行初始化，因此您无法使用[1]
您服务中的getData方法实际上并未返回任何内容

以下是我对服务的建议更改：

getData() {
    this.objAr = utils.sheet_to_json(this.wbSheet, { header: 1 });
    return this.objAr;
}

和组件：

export class AppComponent implements OnInit {

  ObjArray: any[] = [];


  constructor(private _operationDataService: OperationDataService) { }

  ngOnInit() {
    let data = this._operationDataService.getData();
    this.ObjArray.push(data);

  }
}

Answer 2

这是可行的：

Upload() {
    let fileReader = new FileReader();
      fileReader.onload = (e) => {
          this.arrayBuffer = fileReader.result;
          /* convert data to binary string */
          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('excel data:',XLSX.utils.sheet_to_json(worksheet,{raw:true}));
      }
      fileReader.readAsArrayBuffer(this.file);
}

尝试读取Excel文件时出现错误消息

2 个答案: