Question

我正在制作一个Angular4 我有一个按钮，用于将数据转换为带有标头的csv文件。现在我想反过来做，我想上传一个csv文件。所以为了测试，我创建一个对象并从中创建一个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>

Answer 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)"/>

Angular 4 - 上传CSV

1 个答案: