如何讀取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)
          });
  }