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

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 错误类型错误：this.fs.readFileSync 不是函数 在 ShowDemoResultsComponent.webpackJsonp.../../../../../src/app/show-demo-results/show-demo-results.component.ts.ShowDemoResultsComponent.readCsvData (show-demo-results.component.ts:119) 在 Object.eval [as handleEvent] (ShowDemoResultsComponent.html:17) 在句柄事件（core.es5.js:12023） 在 callWithDebugContext (core.es5.js:13493) 在 Object.debugHandleEvent [as handleEvent] (core.es5.js:13081) 在 dispatchEvent (core.es5.js:8615) 在 core.es5.js:9226 在 HTMLButtonElement。 （平台浏览器.es5.js:2651） 在 ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425) 在 Object.onInvokeTask (core.es5.js:3881)

Answer 1

我终于找到答案了 我是这样做的：

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

Answer 2

如果您使用新的 HttpClient 类 (@angular/common/http)，则必须将 responseType 设置为“text”，否则 HttpClient 类会尝试将内容解释为 json 并引发 SyntaxError。 ..

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