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

Question

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

文件阅读

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（show-demo-results.component.ts：119）at object.eval [as handleEvent]（ShowDemoResultsComponent.html：17）at handleEvent（core.es5.js：12023）at at callWithDebugContext（core.es5.js：13493）在Object.debugHandleEvent [as handleEvent]（core.es5.js：13081）的dispatchEvent（core.es5.js：8615）at core.es5.js：9226 at HTMLButtonElement。 （platform-b​​rowser.es5.js：2651）位于Zone的ZoneDelegate.webpackJsonp ... / .. / .. / .. / zone.js / dist / zone.js.ZoneDelegate.invokeTask（zone.js：425） .onInvokeTask（core.es5.js：3881）

Answer 1

如果您使用新的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);
        }
    );

Answer 2

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

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