Преобразование Excel-файла в JSON-объект с помощью JavaScript

Сегодня мы разберем этапы создания JSON-объекта из данных Excel-файла, загруженного средствами браузера. Это может быть полезно для обработки данных клиентов, отчетов или любой другой информации, предс

Содержание

Шаг 1: Загрузка файла
Шаг 2: Обработка события изменения
Шаг 3: Обработка загруженного файла
Шаг 4: Преобразование данных файла
Шаг 5: Функция преобразования Excel в JSON
Пример использования
Заключение
Визуальный пример

Шаг 1: Загрузка файла

Для начала необходимо получить файл Excel от пользователя с помощью тега <input>:

<input type="file" id="fileUploader" name="fileUploader" accept=".xls, .xlsx">

Шаг 2: Обработка события изменения

Далее, нужно обработать событие изменения элемента fileUploader:

$(document).ready(function() {
$("#fileUploader").change(function(evt) {
// Здесь будет ваш код
});
});

Шаг 3: Обработка загруженного файла

Предположим, что клиент загружает только один файл:

var selectedFile = evt.target.files[0];

Шаг 4: Преобразование данных файла

Используем FileReader для преобразования данных файла Excel в бинарную строку. Затем воспользуемся XLSX из библиотеки SheetJS для конвертации этой строки в JSON-объект.

Не забудьте подключить необходимые скрипты в вашем проекте:

<script src="js/jquery.js"></script>
<script src="js/xlsx.full.min.js"></script>

Шаг 5: Функция преобразования Excel в JSON

Ниже представлена функция, которая выполняет преобразование данных Excel-файла в JSON-объект:

$(document).ready(function() {
$("#fileUploader").change(function(evt) {
var selectedFile = evt.target.files[0];
var reader = new FileReader();
reader.onload = function(event) {
var data = event.target.result;
var workbook = XLSX.read(data, {
type: 'binary'
});
workbook.SheetNames.forEach(function(sheetName) {
var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
var json_object = JSON.stringify(XL_row_object);
document.getElementById("jsonObject").innerHTML = json_object;
});
};
reader.onerror = function(event) {
console.error("Файл не может быть прочитан. Код ошибки: " + event.target.error.code);
};
reader.readAsBinaryString(selectedFile);
});
});

В результате выполнения этой функции, данные из Excel-файла будут преобразованы в JSON-объект, с которым вы можете продолжить работу.

Пример использования

Полный исходный код можно посмотреть на GitHub. Пример использования функции в HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Excel to JSON</title>
<script src="js/jquery.js"></script>
<script src="js/xlsx.full.min.js"></script>
<script>
$(document).ready(function() {
$("#fileUploader").change(function(evt) {
var selectedFile = evt.target.files[0];
var reader = new FileReader();
reader.onload = function(event) {
var data = event.target.result;
var workbook = XLSX.read(data, {
type: 'binary'
});
workbook.SheetNames.forEach(function(sheetName) {
var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
var json_object = JSON.stringify(XL_row_object);
document.getElementById("jsonObject").innerHTML = json_object;
});
};
reader.onerror = function(event) {
console.error("Файл не может быть прочитан. Код ошибки: " + event.target.error.code);
};
reader.readAsBinaryString(selectedFile);
});
});
</script>
</head>
<body>
<input type="file" id="fileUploader" name="fileUploader" accept=".xls, .xlsx">
<pre id="jsonObject"></pre>
</body>
</html>

Заключение

Преобразование данных Excel-файла в JSON-объект с помощью JavaScript — это мощный инструмент для работы с данными на стороне клиента. Используя библиотеку SheetJS и немного JavaScript-кода, можно легко обрабатывать и использовать данные из Excel-файлов в веб-приложениях.

Визуальный пример

Вот наглядная иллюстрация, которая отражает процесс преобразования файла Excel в объект JSON с использованием JavaScript:

Это изображение помогает понять, как эффективно преобразовывать файлы Excel в объекты JSON с использованием JavaScript и библиотек, таких как SheetJS.