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

回答

相關問題