JаvaScript: Как прочитать файл CSV и отобразить его содержимое с помощью JavaScript
В jаvascript класс FileReader доступен для чтения данных из файла. С его помощью вы можете читать и просматривать содержимое файла перед его загрузкой на сервер.
В этом уроке я покажу, как можно использовать класс FileReader для чтения CSV-файла и отображения его содержимого на странице с помощью jаvascript.
1. Структура файла CSV
В примере я использую следующую структуру файла:
S.no,Username,Name,Email 1,yssyogesh,Yogesh singh,yogesh@makecodes.ru 2,bsonarika,Sonarika Bhadoria,bsonarika@makecodes.ru 3,vishal,Vishal Sahu,vishal@makecodes.ru 4,anilsingh,Anil singh,anilsingh@makecodes.ru
2. HTML
Создайте элемент файла и кнопку. Используйте <table> для вывода списка выбранных данных CSV-файла. Добавьте событие onclick на кнопку. Оно вызывает функцию readCSVFile().
Готовый код
<!-- CSS -->
<style type="text/css">
table th, table td{
padding: 5px;
}
</style>
<div>
<div>
<input type="file" name="file" id="file" accept=".csv" > <br><br>
<input type="button" id="btnsubmit" value="Submit" onclick="readCSVFile();" >
</div>
<br><br>
<!-- List CSV file data -->
<table id="tblcsvdata" border="1" style="border-collapse: collapse;">
<thead>
<tr>
<th>S.no</th>
<th>Username</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
3. jаvascript - Чтение CSV
Создайте функцию readCSVFile(), которая вызывается при нажатии на кнопку. Проверьте, выбран ли файл или нет.
Чтение файла CSV и отображение данных
- Создайте объект класса FileReader, если выбран файл.
- Передайте экземпляр файла в readAsText() для чтения его данных как строки.
- Добавьте событие onload на объект reader. Оно вызывается, когда файл успешно прочитан.
- Используйте свойство result для получения данных файла. Присвойте эти данные переменной csvdata.
- Разделите строковые данные разрывом строки (\n), чтобы получить данные в формате массива.
- Создайте экземпляр <table> <tbody>, в который нужно добавить данные.
- Выполните цикл по массиву rowData. Здесь, чтобы не читать 1-ю строку, я присвоил переменной row = 1, но вы можете присвоить 0, если хотите читать 1-ю строку.
- Создайте пустой <tr> - tbodyEl.insertRow().
- Разделите значение строки запятой (,), чтобы получить массив данных столбцов.
- Выполните цикл по массиву rowColData для чтения данных столбцов. Создайте ячейку и добавьте значение столбца - rowColData[col].
Готовый код
function readCSVFile(){
var files = document.querySelector('#file').files;
if(files.length > 0 ){
// Выбранный файл
var file = files[0];
// Объект FileReader
var reader = new FileReader();
// Читать файл как строку
reader.readAsText(file);
// Загрузить событие
reader.onload = function(event) {
// Чтение данных файла
var csvdata = event.target.result;
// Разделение по переносу строки для получения строк массива
var rowData = csvdata.split('\n');
// <table > <tbody>
var tbodyEl = document.getElementById('tblcsvdata').getElementsByTagName('tbody')[0];
tbodyEl.innerHTML = "";
// Цикл по массиву строк (измените row=0, если вы также хотите прочитать 1-ю строку)
for (var row = 1; row < rowData.length; row++) {
// Вставить строку в конец таблицы
var newRow = tbodyEl.insertRow();
// Разделить запятой (,), чтобы получить массив столбцов
rowColData = rowData[row].split(',');
// Цикл по столбцу строки массива
for (var col = 0; col < rowColData.length; col++) {
// Вставить ячейку в конце строки
var newCell = newRow.insertCell();
newCell.innerHTML = rowColData[col];
}
}
};
}else{
alert("Пожалуйста, выберите файл.");
}
}
Вы можете использовать этот код для отображения предварительного просмотра данных файла или модифицировать код для применения валидации.
Настройте код в соответствии с вашим CSV-файлом при реализации этого в вашем проекте.
функция чтенияCSVFile(){
var files = document.querySelector('#file').files;
если (файлы.длина > 0) {
// Выбранный файл
var файл = файлы [0];
// Объект FileReader
var reader = новый FileReader();
// Читаем файл как строку
читатель.readAsText (файл);
// Загрузить событие
reader.onload = функция (событие) {
// Чтение данных файла
var csvdata = событие.цель.результат;
// Разделить по разрыву строки, чтобы получить массив строк
var rowData = csvdata.split('\n');
// <таблица> <tbody>
var tbodyEl = document.getElementById('tblcsvdata').getElementsByTagName('tbody')[0];
tbodyEl.innerHTML = "";
// Цикл по массиву строк (измените row=0, если вы также хотите прочитать 1-ю строку)
for (var row = 1; row < rowData.length; row++) {
// Вставляем строку в конец таблицы
var newRow = tbodyEl.insertRow();
// Разделить запятой (,), чтобы получить массив столбцов
rowColData = rowData[строка].split(',');
// Цикл по столбцу строки Массив
for (var col = 0; col < rowColData.length; col++) {
// Вставляем ячейку в конец строки
var newCell = newRow.insertCell();
newCell.innerHTML = rowColData[col];
}
}
};
}еще{
Сообщить("Выберите файл.");
}
}
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.