如何通過線

Question

我編程在angular2讀取csv文件用簡單的HTML輸入應用程序讀取angular2行csv文件：

<input type='file' name='userFile' id='file' > 

我可以存取權限在組件文件。 ts：

ngOnInit() { 

    var input = (<HTMLInputElement>document.getElementById("file")); 
    input.addEventListener("change", function(event) { 
     var files = input.files; 
     var len = files.length; 

     if (len) { 
      console.log("Filename: " + files[0].name); 
      console.log("Type: " + files[0].type); 
      console.log("Size: " + files[0].size + " bytes"); 

     } 

     }, false); 

} 

我怎樣才能讀取使用typescript，javascript或jquery上傳的csv文件的單元格？ （而且這是做到這一點的最佳方式）。

Answer 1

這裏是一個示例實現的角度方式：

@Component({ 
    selector: 'app-my-file', 
    template: ` 
    <div class="form-group"> 
     <input type="file" (change)="onFileSelect($event.target)" name="myfile"> 
    </div> 
    `, 
    styles: [``] 
}) 
export class YourComponent implements OnInit { 

    csvContent: string; 

    constructor(){} 
    ngOnInit(){ 
    } 
    onFileSelect(input: HTMLInputElement) { 

     const files = input.files; 

    if (files && files.length) { 
     /* 
      console.log("Filename: " + files[0].name); 
      console.log("Type: " + files[0].type); 
      console.log("Size: " + files[0].size + " bytes"); 
      */ 

      const fileToRead = files[0]; 

      const fileReader = new FileReader(); 
      fileReader.onload = function(fileLoadedEvent){ 
       const textFromFileLoaded = fileLoadedEvent.target.result; 
       this.csvContent = textFromFileLoaded; 
      }; 

      fileReader.readAsText(fileToLoad, "UTF-8"); 
    } 

    } 
} 

Answer 2

我找到了一種方法來提取文本：

var fr = new FileReader(); 
    fr.onload = function(e) { 
     var text = fr.result; 
     console.log(text); 
    }; 
    fr.readAsText(files[0]); 

，然後用不同的分割行和單元成陣列：

var rows = text.split("\n"); 
console.log("Row 0 " + rows[0]); 
console.log("Row 1 " + rows[1]); 
console.log("Row 2 " + rows[2]); 
var row1 = rows[0].split(";"); 
console.log("Value 0,0 " + row1[0]); 
console.log("Value 0,1 " + row1[1]); 
console.log("Value 0,2 " + row1[2]); 

*此代碼不能很好地工作，如果細胞中含有「 ;」字符，這不是我的應用程序的情況。

Answer 3

csv2Array(fileInput: any){ 
//read file from input 
this.fileReaded = fileInput.target.files[0]; 

let reader: FileReader = new FileReader(); 
reader.readAsText(this.fileReaded); 

reader.onload = (e) => { 
    let csv: string = reader.result; 
    let allTextLines = csv.split(/\r|\n|\r/); 
    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]); 
     } 

     // log each row to see output 
     console.log(tarr); 
     lines.push(tarr); 
    } 
    } 
    // all rows in the csv file 
    console.log(">>>>>>>>>>>>>>>>>", lines); 
} }