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

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

Следующим шагом, нужно определиться, что делать с полученным файлом. Нам потребуется событие change загруженного элемента fileUploader:

$(document).ready(function() {
  $("#fileUploader").change(function(evt) {
    // здесь должен находиться Ваш код
  })
})

Теперь нужно определиться, как именно обработать файл. Для начала, предположим, что клиент загрузил только один файл:

selectedFile = evt.target.files[0];

Затем, мы преобразуем данные файла excel в бинарную строку, используя FileReader. После чего, воспользуемся XLSX, который в свою очередь является встроенным объектом SheetJS js-xlsx, для того, чтобы конвертировать полученную бинарную строку в 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);
  });
});

В результате мы получаем JSON-объект, с данными которого можем продолжить работу.

Полный исходный код можно посмотреть на GitHub.

Спасибо за внимание.

Перевод статьи Yamuna Dulanjani “How to convert Excel data into JSON object using JavaScript”.