如何在Angular-4资产中读取csv文件 [英] How to read csv file in Angular-4 assets

问题描述

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

I am new to angular-4 and I want to read a csv file from angular-4 assets directory, file size 5mb and I dont't want to read this file from django back-end server because this file is to show only demo graphs and I don't need to send 5mb extra request to server, thanks currently I follow this stack overflow 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错误TypeError: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 [作为handleEvent](ShowDemoResultsComponent.html:17) 在handleEvent(core.es5.js:12023) 在callWithDebugContext(core.es5.js:13493) 在Object.debugHandleEvent [作为handleEvent](core.es5.js:13081) 在dispatchEvent(core.es5.js:8615) 在core.es5.js:9226 在HTMLButtonElement. (platform-b​​rowser.es5.js:2651) 在ZoneDelegate.webpackJsonp .../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425) 在Object.onInvokeTask(core.es5.js:3881)

ShowDemoResultsComponent.html:17 ERROR TypeError: this.fs.readFileSync is not a function at 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 callWithDebugContext (core.es5.js:13493) at Object.debugHandleEvent [as handleEvent] (core.es5.js:13081) at dispatchEvent (core.es5.js:8615) at core.es5.js:9226 at HTMLButtonElement. (platform-browser.es5.js:2651) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425) at Object.onInvokeTask (core.es5.js:3881)

推荐答案

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

In case you use the new HttpClient class (@angular/common/http), then you will have to set the responseType to 'text', otherwise the HttpClient class would try to interpret the content as json and raise a SyntaxError...

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

这篇关于如何在Angular-4资产中读取csv文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！