Jak analizować plik Excel (XLS) w Javascript / HTML5

141

Jestem w stanie odczytać plik Excela, FileReaderale wyświetla tekst, a także dziwne znaki. Muszę czytać xlsplik w wierszach, odczytać dane w każdej kolumnie i przekonwertować je na JSON.

Jak czytać plik xls wiersz po wierszu?

ducktyped
źródło
1
możliwy duplikat Jak odczytać zawartość pliku Excela po stronie klienta?
Jakiś programista z
1
@JoachimPileborg: to nie odpowiada na pytanie. Muszę czytać plik Excela wiersz po wierszu. Chociaż mogę go przeczytać za pomocą FileReader (HTML5), ale nadal nie mogę przeglądać wierszy.
ducktyped

Odpowiedzi:

113

Funkcja poniżej konwertuje dane arkusza Excel (format XLSX) do formatu JSON. możesz dodać obietnicę do funkcji.

<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_object);

      })

    };

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

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

Poniższy post zawiera kod dla formatu XLS Excel na kod JavaScript JSON?

Peru
źródło
1
zawiesza się w przypadku większych plików programu Excel w przeglądarce Chrome, jakieś dobre rozwiązanie?
Zed
Czy mogę wiedzieć, jak większy jest twój plik?
Peru
6
e.target.result () powinno być e.target.result patrz developer.mozilla.org/en-US/docs/Web/API/FileReader/onload
user227353
3
Dla mnie musiałem wcześniej zadeklarować jszip.jsskrypt xlsx.js.
Florin Vîrdol
1
Jak mogę przypisać json_object do zmiennej publicznej i uzyskać do niej dostęp poza pętlą for?
Shardul
109

Stare pytanie, ale powinienem zauważyć, że ogólne zadanie parsowania plików XLS z javascript jest żmudne i trudne, ale nie niemożliwe.

Mam podstawowe parsery zaimplementowane w czystym JS:

Obie strony są parserami XLS / XLSX opartymi na interfejsie API pliku HTML5 (możesz przeciągnąć i upuścić plik, a dane w komórkach zostaną wydrukowane w postaci listy oddzielonej przecinkami). Możesz także generować obiekty JSON (zakładając, że pierwszy wiersz jest wierszem nagłówka).

Zestaw testów http://oss.sheetjs.com/ pokazuje wersję, która używa XHR do pobierania i analizowania plików.

SheetJS
źródło
4
Gdybyś mógł dodać przykładowy kod do odpowiedzi, byłoby to znacznie lepsze (dodaj także diakceptację, jeśli jesteś liderem biblioteki).
acdcjunior
czy możemy pominąć kilka górnych wierszy i kolumn xlsx z JS-XLSX?
2015
23

Prześlij excel filetutaj i możesz pobrać dane w JSONformacie 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>

To jest połączenie następujących Stackoverflowpostów:

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

Powodzenia...

Aakash
źródło
15

Ten kod może ci pomóc W
większości przypadków jszip.js nie działa, więc dołącz xlsx.full.min.js do swojego kodu js.

Kod 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]);
    };
afzalriz304
źródło
A co z tym, że chcę załadować zdjęcia również w arkuszu Excela
Mayur Agarwal
10

Jeśli szukasz najprostszego i najmniejszego sposobu odczytu pliku * .xlsx w przeglądarce, ta biblioteka może to zrobić:

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.
  })
})

W powyższym przykładzie datasą to nieprzetworzone dane ciągów. Można go przeanalizować do formatu JSON ze ścisłym schematem, przekazując schemaargument. Zobacz dokumentację API, aby zobaczyć przykład.

Dokumentacja API: http://npmjs.com/package/read-excel-file

katamfetamina
źródło
4

Dziękuję za powyższą odpowiedź, myślę, że zakres (odpowiedzi) jest zakończony, ale chciałbym dodać „sposób reagowania” dla każdego, kto używa Reaguj.

Utwórz plik o nazwie importData.js:

import React, {Component} from 'react';
import XLSX from 'xlsx';
export default class ImportData extends Component{
    constructor(props){
        super(props);
        this.state={
            excelData:{}
        }
    }
    excelToJson(reader){
        var fileData = reader.result;
        var wb = XLSX.read(fileData, {type : 'binary'});
        var data = {};
        wb.SheetNames.forEach(function(sheetName){
             var rowObj =XLSX.utils.sheet_to_row_object_array(wb.Sheets[sheetName]);
             var rowString = JSON.stringify(rowObj);
             data[sheetName] = rowString;
        });
        this.setState({excelData: data});
    }
    loadFileXLSX(event){
        var input = event.target;
        var reader = new FileReader();
        reader.onload = this.excelToJson.bind(this,reader);
        reader.readAsBinaryString(input.files[0]);
    }
    render(){
        return (
            <input type="file" onChange={this.loadFileXLSX.bind(this)}/>
        );
    }
}

Następnie możesz użyć komponentu w metodzie renderowania, na przykład:

import ImportData from './importData.js';
import React, {Component} from 'react';
class ParentComponent extends Component{
    render(){
        return (<ImportData/>);
    }
}

<ImportData/>by ustawić dane do własnego państwa, można uzyskać dostęp do danych programu Excel w „komponentu macierzystego”, wykonując w tym :

Bramy Syjonu
źródło
1
Myślę, że tag w instrukcji return powinien być <ImportData/>zamiast <importData/>. Jestem dość nowy w React, ale uważam, że nazwy komponentów są zawsze pisane wielkimi literami. W każdym razie jest to nazwa używana podczas importu w przykładzie.
raben
3

<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>

jestem w
źródło
0

Jeśli kiedykolwiek zastanawiałeś się, jak odczytać plik z serwera, ten kod może być pomocny.

Ograniczenia:

  1. Plik powinien znajdować się na serwerze (lokalny / zdalny).
  2. Będziesz musiał skonfigurować nagłówki lub mieć wtyczkę Google CORS.

<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>
Vijay Reddy
źródło
0

dołącz pliki xslx.js, xlsx.full.min.js, jszip.js

dodać procedurę obsługi zdarzeń onchange do wejścia pliku

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);

}
vsnahar
źródło
-4

XLS to binarny zastrzeżony format używany przez firmę Microsoft. Parsowanie XLS z językami po stronie serwera jest bardzo trudne bez użycia określonej biblioteki lub Office Interop. Robienie tego za pomocą javascript jest niemożliwe. Dzięki interfejsowi API plików HTML5 możesz czytać jego zawartość binarną, ale aby ją przeanalizować i zinterpretować, musisz zagłębić się w specyfikacje formatu XLS . Począwszy od pakietu Office 2007 firma Microsoft przyjęła formaty plików Open XML ( xslxdla programu Excel), które są standardem.

Darin Dimitrov
źródło
@ducktyped, nie znam ani nie widziałem żadnego kodu javascript, który czyta binarny plik Excel.
Darin Dimitrov
13
Niewykonalna misja? Wątpię. Jeśli możemy uruchomić jądro Linuksa w javascript po stronie klienta, powinno być możliwe przeanalizowanie binarnego pliku Excel. Po prostu nikt, o ile wiem, tego jeszcze nie zrobił.
JP Richardson
Oto dokumentacja dla ciekawych struktury ms xls msdn.microsoft.com/en-us/library/office/…
djra Kwietnia
-5

var excel = nowy obiekt ActiveXObject ("Excel.Application"); var book = excel.Workbooks.Open (your_full_file_name_here.xls); var sheet = book.Sheets.Item (1); var value = sheet.Range ("A1");

kiedy masz arkusz. Możesz używać funkcji VBA, tak jak w programie Excel.

i100
źródło
6
działa to tylko z „naszym drogim przyjacielem” IE. I muszę używać HTML5. Muszę tylko przejrzeć zawartość tekstową wiersz po wierszu.
ducktyped