Angular 4 - 上传CSV

我正在做一个Angular4 我有一个按钮，可以将数据转换为带有标题的csv文件。现在我想以相反的方式做到这一点，我想上传一个CSV文件。因此，为了测试，我创建一个对象并从中创建一个csv文件，然后我想单击一个按钮并上传该文件并获得相同的结果。Angular 4 - 上传CSV

我发现一个角度模块导出csv，但我找不到一个反过来。有人可以帮助我吗？

这是我的代码：

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>

来源

2017-07-17 fangio

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

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. 
    }

You ca在这里，n找到详细的职位：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)"/>

来源

2017-07-17 08:09:21

我怎样才能得到数据，例如我需要输入文件的输入类型=“文件”.... – fangio

@fangio也添加了html代码。 –

谢谢你的回答。 – fangio

Angular 4 - 上传CSV

回答

相关问题