Я хочу прочитать файл CSV, который я загружаю с использованием файла типа ввода, и передать его данные в массив.
Я использую Angularjs с файлом типа ввода для чтения файла CSV, xls или xlsx следующим образом:
HTML:
<input class="btn btn-default col-xs-6" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" onchange="angular.element(this).scope().checkFormat(this.files)">
JavaScript/AngularJS:
$scope.checkFormat = function(files) {
var fd = new FormData();
//Take the first selected file
fd.append("file", files[0]);
}
Как я могу прочитать этот файл CSV за строкой и нажимать каждую строку в массив?
Лучше всего это сделать директиву с такой функциональностью (скажем, мы называем ее csvUpload
и используем ее так: <csv-upload ng-model="myData">
) - таким образом она будет повторно использоваться, и вам не придется реализовывать эта логика, возможно, у многих контроллеров. Это тоже очень удобно: если у вас есть это, вы просто выбираете файл и, бам, имеете свои данные в $scope.myData
:)
Вот как я это сделал:
(Чтобы преобразовать csv в json, я использую довольно хорошо установленную библиотеку https://github.com/mholt/PapaParse, но вы можете самостоятельно разобрать строку csv на json. Я бы не рекомендовал ее;)
.directive('csvUpload', function () {
return {
restrict: 'E',
template: '<input type="file" onchange="angular.element(this).scope().handleFiles(this.files)">',
require: 'ngModel',
scope: {},
link: function (scope, element, attrs, ngModel) {
scope.handleFiles = function (files) {
Papa.parse(files[0], {
dynamicTyping: true,
complete: function(results) {
// you can transform the uploaded data here if necessary
// ...
ngModel.$setViewValue(results);
}
});
};
}
};
});
** HTML
**
<input type="file" name="datasource_upload" accept="application/vnd.ms-excel, application/pdf,.csv" ngf-max-size="2MB" (change)="csv2Array($event)">
**
Код машинописного текста
**
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);
} }