Как разобрать файл Excel в Javascript / HTML5 - PullRequest
Новая
       16

Как разобрать файл Excel в Javascript / HTML5

99 голосов
/ 23 ноября 2011

Я могу прочитать файл Excel через FileReader, но он выводит текст и странные символы вместе с ним. Мне нужно прочитать xls файл построчно, прочитать данные в каждом столбце и преобразовать его в JSON.

Как читать файл xls построчно?

Ответы [ 9 ]

102 голосов
/ 23 июня 2013

Старый вопрос, но я должен отметить, что общая задача синтаксического анализа файлов XLS из javascript утомительна и трудна, но не невозможна.

У меня есть базовые парсеры, реализованные на чистом JS:

Обе страницы являются анализаторами XLS / XLSX, управляемыми API-интерфейсом для файлов HTML5 (вы можете перетащить файл, и он распечатает данные в ячейках в списке через запятую). Вы также можете генерировать объекты JSON (при условии, что первая строка является строкой заголовка).

Набор тестов http://oss.sheetjs.com/ показывает версию, которая использует XHR для получения и анализа файлов.

71 голосов
/ 07 мая 2016

Ниже функция преобразует данные листа Excel (в формате XLSX) в JSON.Вы можете добавить обещание к функции.

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script>
var ExcelToJSON = function() {

  this.parseExcel = function(file) {
    var reader = new FileReader();

    reader.onload = function(e) {
      var data = e.target.result();
      var workbook = XLSX.read(data, {
        type: 'binary'
      });

      workbook.SheetNames.forEach(function(sheetName) {
        // Here is your object
        var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
        var json_object = JSON.stringify(XL_row_object);
        console.log(json_object);

      })

    };

    reader.onerror = function(ex) {
      console.log(ex);
    };

    reader.readAsBinaryString(file);
  };
};
</script>

Ниже в сообщении приведен код для формата XLS Код JavaScript в формате JSON-Excel?

11 голосов
/ 14 июля 2017

Этот код может помочь вам
Большую часть времени jszip.js не работает, поэтому включите xlsx.full.min.js в свой код js.

HTML-код 

 <input type="file" id="file" ng-model="csvFile"  
    onchange="angular.element(this).scope().ExcelExport(event)"/>

Javascript 

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.10.8/xlsx.full.min.js">
</script>

$scope.ExcelExport= function (event) {


    var input = event.target;
    var reader = new FileReader();
    reader.onload = function(){
        var fileData = reader.result;
        var wb = XLSX.read(fileData, {type : 'binary'});

        wb.SheetNames.forEach(function(sheetName){
        var rowObj =XLSX.utils.sheet_to_row_object_array(wb.Sheets[sheetName]);
        var jsonObj = JSON.stringify(rowObj);
        console.log(jsonObj)
        })
    };
    reader.readAsBinaryString(input.files[0]);
    };
7 голосов
/ 18 октября 2018

Загрузите excel file здесь, и вы можете получить данные в формате JSON в console: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
<script>
    var ExcelToJSON = function() {

      this.parseExcel = function(file) {
        var reader = new FileReader();

        reader.onload = function(e) {
          var data = e.target.result;
          var workbook = XLSX.read(data, {
            type: 'binary'
          });
          workbook.SheetNames.forEach(function(sheetName) {
            // Here is your object
            var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
            var json_object = JSON.stringify(XL_row_object);
            console.log(JSON.parse(json_object));
            jQuery( '#xlx_json' ).val( json_object );
          })
        };

        reader.onerror = function(ex) {
          console.log(ex);
        };

        reader.readAsBinaryString(file);
      };
  };

  function handleFileSelect(evt) {
    
    var files = evt.target.files; // FileList object
    var xl2json = new ExcelToJSON();
    xl2json.parseExcel(files[0]);
  }


 
</script>

<form enctype="multipart/form-data">
    <input id="upload" type=file  name="files[]">
</form>

    <textarea class="form-control" rows=35 cols=120 id="xlx_json"></textarea>

    <script>
        document.getElementById('upload').addEventListener('change', handleFileSelect, false);

    </script>

Это комбинация следующих Stackoverflow сообщений:

  1. https://stackoverflow.com/a/37083658/4742733
  2. https://stackoverflow.com/a/39515846/4742733

Удачи ...

2 голосов
/ 21 марта 2018

Если вы хотите самый простой и крошечный способ чтения файла * .xslx в браузере, то эта библиотека может сделать:

https://catamphetamine.github.io/read-excel-file/

<input type="file" id="input" />

import readXlsxFile from 'read-excel-file'

const input = document.getElementById('input')

input.addEventListener('change', () => {
  readXlsxFile(input.files[0]).then((data) => {
    // `data` is an array of rows
    // each row being an array of cells.
  })
})

ВПример выше data - это необработанные строковые данные.Его можно проанализировать в JSON со строгой схемой, передав аргумент schema.См. API документы для примера этого.

API документы: http://npmjs.com/package/read-excel-file

0 голосов
/ 10 мая 2018

включает xslx.js, xlsx.full.min.js, jszip.js

добавить обработчик события onchange для ввода файла 

function showDataExcel(event)
{
            var file = event.target.files[0];
            var reader = new FileReader();
            var excelData = [];
            reader.onload = function (event) {
                var data = event.target.result;
                var workbook = XLSX.read(data, {
                    type: 'binary'
                });

                workbook.SheetNames.forEach(function (sheetName) {
                    // Here is your object
                    var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);

                    for (var i = 0; i < XL_row_object.length; i++)
                    {
                        excelData.push(XL_row_object[i]["your column name"]);

                    }

                    var json_object = JSON.stringify(XL_row_object);
                    console.log(json_object);
                    alert(excelData);
                })

            };

            reader.onerror = function (ex) {
                console.log(ex);
            };

            reader.readAsBinaryString(file);

}
0 голосов
/ 12 марта 2018

Если вам интересно, как прочитать файл с сервера, этот код может быть полезен.

Ограничения:

  1. Файл должен быть на сервере (локальный / удаленный).
  2. Вам нужно будет настроить заголовки или установить плагин CORS для Google. 

<Head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script lang="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.12.4/xlsx.core.min.js"></script>
</head>

<body>
    <script>
    /* set up XMLHttpRequest */


    // replace it with your file path in local server
    var url = "http://localhost/test.xlsx";

    var oReq = new XMLHttpRequest();
    oReq.open("GET", url, true);
    oReq.responseType = "arraybuffer";

    oReq.onload = function(e) {
        var arraybuffer = oReq.response;

        /* convert data to binary string */
        var data = new Uint8Array(arraybuffer);

        var arr = new Array();
        for (var i = 0; i != data.length; ++i) {
            arr[i] = String.fromCharCode(data[i]);
        }

        var bstr = arr.join("");

        var cfb = XLSX.read(bstr, { type: 'binary' });

        cfb.SheetNames.forEach(function(sheetName, index) {

            // Obtain The Current Row As CSV
            var fieldsObjs = XLS.utils.sheet_to_json(cfb.Sheets[sheetName]);

            fieldsObjs.map(function(field) {
                $("#my_file_output").append('<input type="checkbox" value="' + field.Fields + '">' + field.Fields + '<br>');
            });

        });
    }

    oReq.send();
    </script>
</body>
<div id="my_file_output">
</div>

</html>
0 голосов
/ 23 ноября 2011

var excel = новый ActiveXObject ("Excel.Application"); var book = excel.Workbooks.Open (your_full_file_name_here.xls); var sheet = book.Sheets.Item (1); значение переменной = sheet.Range ("A1");

когда у вас есть лист. Вы можете использовать функции VBA, как в Excel.

0 голосов
/ 23 ноября 2011

XLS - это двоичный запатентованный формат, используемый Microsoft. Разбор XLS с языками на стороне сервера очень сложен без использования какой-либо конкретной библиотеки или взаимодействия с Office. Делать это с помощью JavaScript невозможно. Благодаря API файлов HTML5 вы можете читать его двоичное содержимое, но для его анализа и интерпретации вам необходимо погрузиться в спецификации формата XLS . Начиная с Office 2007, Microsoft приняла стандартные форматы файлов Open XML (xslx для Excel), которые являются стандартными.

...