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

Posted

技术标签:

【中文标题】如何在 Angular-4 资产中读取 csv 文件【英文标题】:How to read csv file in Angular-4 assets 【发布时间】:2018-06-04 20:52:51 【问题描述】:

我是 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)

【问题讨论】:

Angular - Read a file and parse its content的可能重复 不是,在您提到的参考资料中,他们从与文件上传 btn 绑定的事件中读取文件,但在我的情况下,文件不是通过上传 btn 上传的,我只想从资产中读取文件。例如` let fileReader = new FileReader(); fileReader.read('filepath', 'r')` 之类的。 【参考方案1】:

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

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

【讨论】:

我怎样才能下载这个文件?【参考方案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);
        
    );

【讨论】:

为什么会这样?但是,它仅适用于资产文件夹。如果我在 app/ 下创建一个目录并从该位置读取,它将不起作用。 responseType 改变了我,非常感谢

以上是关于如何在 Angular-4 资产中读取 csv 文件的主要内容,如果未能解决你的问题,请参考以下文章

HSQL CSV 文本表正在读取多行的单列

labview如何读取文本文档中某一行的字符串

在 Heroku 上构建 Angular 4 应用程序时,不包括资产

vb.net 怎么生成csv文件与怎么读取csv文件

如何将 csv 文件转换为可作为文本读取的列表列表? Python

如何删除错误行错误的行并使用 pandas 或 numpy 读取剩余的 csv 文件?