如何读取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)在ZoneDelegate.webpackJsonp .../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask(zone.js:425)at Object .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);
        }
    );