Angular 4 - 上传 CSV

Posted 2023-03-13

【中文标题】Angular 4 - 上传 CSV

【英文标题】：Angular 4 - Upload CSV

【发布时间】：2017-12-21 15:36:24

【问题描述】：

我正在制作一个 Angular4 我有一个按钮，可以将数据转换为带有标题的 csv 文件。 现在我想反过来做，我想上传一个 csv 文件。 因此，为了进行测试，我制作了一个对象并从中制作了一个 csv 文件，然后我想单击一个按钮并上传该文件并获得相同的结果。

我找到了一个用于导出 csv 的 Angular 模块，但我找不到相反的模块。有人可以帮我吗？

这是我的代码：

test.ts

import  Component, OnInit from '@angular/core';
import  Angular2Csv  from 'angular2-csv/Angular2-csv';
import Unit from "../../../_shared/unit";

@Component(
  moduleId: module.id,
  templateUrl: 'test.component.html',
  styleUrls: ['./test.css']
)


export class TestComponent implements OnInit 



  ngOnInit() 

  public export() 
    // Unit (id,name,description)
    var data = [new Unit(1,"Unit1","This is unit 1!")];

    var options = 
      fieldSeparator: ';',
      quoteStrings: '"',
      decimalseparator: ',',
      showLabels: true,
      useBom: true
    ;
    new Angular2Csv(data, "data", options);
  

  public import()

test.html

<button (click)="export()">Download CSV</button>
<button (click)="import()">Upload CSV</button>

【参考方案1】：

您可以使用自定义函数来实现该功能，试试这个：

private extractData(data)  // Input csv data to the function

    let csvData = data;
    let allTextLines = csvData.split(/\r\n|\n/);
    let headers = allTextLines[0].split(',');
    let lines = [];

    for ( let i = 0; i < allTextLines.length; i++) 
        // split content based on comma
        let data = allTextLines[i].split(',');
        if (data.length == headers.length) 
            let tarr = [];
            for ( let j = 0; j < headers.length; j++) 
                tarr.push(data[j]);
            
            lines.push(tarr);
        
    
    console.log(lines); //The data in the form of 2 dimensional array.
  

你可以在这里找到详细的帖子：http://blog.sodhanalibrary.com/2016/10/read-csv-data-using-angular-2.html#.WWxu9XV97OQ

您可以像这样在文件侦听器函数中读取文件：

function handleFileSelect(evt) 
      var files = evt.target.files; // FileList object
      var file = files[0];
      var reader = new FileReader();
      reader.readAsText(file);
      reader.onload = function(event)
        var csv = event.target.result; // Content of CSV file
        this.extractData(csv); //Here you can call the above function.
      

在 html 里面这样做：

 <input type="file" (change)="handleFileSelect($event)"/>

【讨论】：

如何获取数据，比如我需要导入input type="file"的文件....

我确实有一个错误：“EventTarget”类型上不存在属性“结果”

你能控制一下你在事件中得到了什么吗？

让我们continue this discussion in chat.

这与 angular 4 和新的打字稿有关，我必须定义一个新接口才能使其工作，github.com/Microsoft/TypeScript/issues/…