Question

我是angular-4的新手，我想从angular-4资源目录中读取一个csv文件，文件大小为5mb，我不想从django后端服务器读取此文件，因为此文件是要显示的只有演示图，我不需要向服务器发送5mb额外请求，谢谢目前我关注此堆栈溢出question

文件阅读

private fs = require('fs');

readCsvData () {
    let allText = this.fs.readFileSync('assets/demo-Results.csv', 'utf8');
    console.log(allText)
    // this.extractData(allText);
}

错误是：

ShowDemoResultsComponent.html:17 ERROR TypeError：this.fs.readFileSync 不是一个功能在ShowDemoResultsComponent.webpackJsonp ... / .. / .. / .. / .. / src / app / show-demo-results / show-demo-results.component.ts.ShowDemoResultsComponent.readCsvData （秀-演示results.component.ts：119）在Object.eval [as handleEvent]（ShowDemoResultsComponent.html：17） at handleEvent（core.es5.js：12023） at callWithDebugContext（core.es5.js：13493） at Object.debugHandleEvent [as handleEvent]（core.es5.js：13081） at dispatchEvent（core.es5.js：8615）在core.es5.js：9226 在HTMLButtonElement。（平台browser.es5.js：2651）在ZoneDelegate.webpackJsonp ... / .. / .. / .. / zone.js / dist / zone.js.ZoneDelegate.invokeTask （zone.js：425）在Object.onInvokeTask（core.es5.js：3881）

Answer 1

如果你使用新的HttpClient类（@ angular / common / http），那么你必须将responseType设置为＆＃39; text＆＃39;否则HttpClient类会尝试将内容解释为json并引发一个SyntaxError ...

e.g.:
this.http.get('assets/file.csv', {responseType: 'text'})
    .subscribe(
        data => {
            console.log(data);
        },
        error => {
            console.log(error);
        }
    );

Answer 2

我终于找到了答案 以下是我的工作方式：

csvUrl = 'assets/demo-Results.csv';
readCsvData () {
      this.http.get(this.csvUrl)
        .subscribe(
          data => {
            console.log(data.text())
          },
          err => {
            console.log(err)
          });
  }

如何读取Angular-4资产中的csv文件

2 个答案: